How to Check TeamDynamix Articles for Accessibility Issues

Ensuring that TeamDynamix articles are accessible helps make information available to all users, including those with disabilities. This guide walks you through the basics of accessibility, how to use the Web Accessibility Evaluation Tool (WAVE) to find common issues, and how to fix them to meet accessibility standards.

What Accessibility Is and Why It Matters

Accessibility means creating content that everyone can use, including people with disabilities. This includes users who rely on assistive technologies such as screen readers, keyboard-only navigation, or voice controls.

Making content accessible is not just a best practice; it is essential. It ensures that all users, regardless of ability, can access the information they need. For TeamDynamix articles, this means providing support content that is usable by all students, staff, and faculty. Accessibility also supports legal compliance and reflects a commitment to inclusion and equal access.

How to Run the WAVE Tool to Scan for Issues

The WAVE browser extension is an easy way to identify accessibility issues on a webpage. It highlights problems such as missing alternative text, low color contrast, and incorrect heading structure, helping you spot barriers that could affect users with disabilities.

1.  To get started, install the WAVE extension for your browser from wave.webaim.org.
2. Once it’s installed, open your published TeamDynamix article in the browser, right-click anywhere on the page, and select "WAVE this page" from the context menu.
   
   
    
3. The extension will analyze the page and display icons and indicators highlighting accessibility errors, alerts, and structural elements. You only need to review the items listed under the "Errors" and "Contrast Errors" categories. To view the errors, click the View Details button.
   
   
    
4. A list of errors will appear in the panel area. Click each icon to review the corresponding issue.
   
   
    
5. Visual markers will also appear directly on the page, making it easier to locate and understand the issues that need to be addressed.
   
   
    

Common Issues Found

When creating or reviewing TeamDynamix articles, it’s helpful to be aware of a few key accessibility considerations. The following are some common areas to watch for to ensure your content is accessible to all users. 

Missing or Non-Descriptive Alt Text

Alternative text (alt text) describes images for users who rely on screen readers. When alt text is missing or vague, important visual information is lost, making the content less accessible to those with visual impairments.

Empty or Inconsistent Headings

Headings provide structure and help users navigate content quickly. Inconsistent heading levels or empty headings can confuse assistive technologies and make it difficult for users to understand the organization of the article. When headings are inconsistent or empty, adjust them to follow a logical order by using heading levels (H1, H2, H3, etc.) properly to reflect the structure of your content.

Color Contrast Issues

Text with poor color contrast, such as red text on certain backgrounds, can be hard to read for people with low vision or color blindness. Ensuring sufficient contrast between text and background improves readability for all users.

How to Fix the Issues

Once you have identified accessibility issues using the WAVE checker, the next step is to fix them to make your TeamDynamix articles more inclusive. Fixing these problems usually involves simple changes that improve usability for everyone.

Missing or Non-Descriptive Alt Text

If images in TeamDynamix articles are missing alt text, the WAVE tool will not flag them. This is because the TeamDynamix platform automatically inserts alt="" into the image code, which signals to WAVE that the image is decorative. As a result, these issues require a manual check. A manual review is also necessary to identify images that have alt text but lack meaningful or descriptive content. Here’s how to perform a manual check:

1. Open the article in TeamDynamix by clicking the Edit Article button.
2. Click on the image to select it, then click the Image icon in the toolbar.
   
   
    
3. The Image Properties dialog box will appear. Locate the Alternative Text field.
   
   
    
4. Review the text. If the field is empty or does not contain descriptive text, add meaningful alt text.
   1. Example of acceptable/descriptive alt text: Screenshot of the Adobe Portfolio interface showing the new site creation and edit site sections.
   2. Example of unacceptable/non-descriptive alt text: Adobe Portfolio screenshot
5. Repeat this process for any other images in the article.
6. Make any necessary corrections and click on the Update Article button at the bottom.

This manual check ensures that images are not only technically marked with alt text but also described in a meaningful and useful way for screen reader users.

Empty or Inconsistent Headings

Headings provide structure and help users navigate content more easily, especially those using screen readers or other assistive technologies. In TeamDynamix articles, headings should follow a logical, nested order (for example, an <h2> should be followed by an <h3>, not an <h4> or another <h2> unless starting a new section).

The WAVE checker will flag empty headings, such as <h3>&nbsp;</h3>, which serve no purpose and can be confusing for users relying on screen readers. These should be removed or replaced with meaningful text. Here is the process to find empty headings:

1. Open the article in TeamDynamix by clicking the Edit Article button.
2. In the content editor, locate and click the Source button to view the article’s HTML code.
   
    
3. Review all headings, such as <h2>Some text here...</h2>, as well as <h3> through <h6> tags.
   1. Example of a correct heading: <h3>Additional Information</h3>
   2. Example of an empty heading: <h3>&nbsp;</h3> or <h3></h3>
4. Make any necessary corrections and click on the Update Article button at the bottom.

Inconsistent heading levels are not flagged by WAVE, so this requires a manual review. Here’s how to perform a manual check:

1. Open the article in TeamDynamix by clicking the Edit Article button.
2. Locate the first heading. This should be the H2 subheading (the H1 is the article title, which is automatically pulled into the article). To determine which heading level is used, click anywhere in the heading and look for the dropdown menu that indicates the heading style. It should read Heading 2.
   
   
    
3. Repeat this process for the next heading. Depending on how your content is structured, the next heading could be another H2, or an H3 if it introduces a subtopic within the H2 section.
4. Make any necessary corrections and click on the Update Article button at the bottom.

Color Contrast Issues

To resolve color contrast issues, choose text and background color combinations that meet accessibility standards and provide sufficient contrast for readability. Avoid using bright red text (hex color #FF0000) on a white background (hex color #FFFFFF), as this combination does not provide adequate contrast.

Although the TeamDynamix page editor includes a “Red” color option, it’s best to select an alternative, such as Fire Brick. Follow the steps below to adjust the text color:

1. Open the article in TeamDynamix by clicking the Edit Article button.
2. Highlight the sentence or paragraph that needs a color change.
3. Click the Text Color icon (located in the second row of editor buttons, near the center).
   
   
4. Select the appropriate color. If you are changing the text from bright red to dark red (Fire Brick), choose Fire Brick from the color palette. It is the first option in the second row of colors.
   
   
    
5. Click on the Update Article button at the bottom.

Support

If you're unable to resolve these issues or notice any others, please submit a support request.