Visual Indicators

Table of Contents

1. Priority
2. Description
3. More Info
4. Coding/Best Practices
5. Testing/QA
6. Search Engine Optimization (SEO)
7. W3C Guidelines

Priority:

Required

Short Discription:

Do not convey information by color alone, a text alternative is required. On interfaces where graphics are used to indicate an open or closed tab, each alt tag must convey the current state (open/closed, active/inactive).

More Info:

Visual indicators come in many forms. Using the colors red and green to indicate states is one example. If the color comes with another indicator like the position of the red or green light on a stop light, then it is not using color alone. Also, the small arrows that are used in tree views to let the visual user know the tree is open or closed is another good example of a place where additional information is needed to let the screen reader user know the current state of the tree.

Coding:

Best Practices:

None

Guidelines:

• Avoid using color to convey information. A red asterisk for late arrivals and a green asterisk for on time arrivals would not work for people with color vision deficiency. However; a red image that says “Late Arrival” and a green image that says “On Time” would be a good substitute.

Testing:

There is no automated test for visual indicators.
Some examples include:

• Using a red asterisk to indicate an error in form validation.
• Using a red light to indicate a problem and a green light to indicate ok.
• Using red text to warn the user of a problem.
• Using red and or green background to indicate a condition.
• There is nothing wrong with using red and green as long as they are not the only method for conveying the information. A stop light with the red on top and the green on bottom would be fine.

SEO:

No known SEO issues.

W3C:

HTML Techniques for Web Content Accessibility Guidelines 1.0

Color in images

CSS Techniques for Web Content Accessibility Guidelines 1.0

Ensuring information is not in color alone