|
Section 508 Web Accessibility
- Conveyed with Color Guidelines
§1194.22(c)Web pages shall be designed so that all information
conveyed with color is also available without color, for
example from context or markup.
Checkpoint
Is color used to highlight an important word or passage?
Explanation
Color is often used to make certain words or passages stand out (e.g. a
health alert might be written in red font).
Guidelines
If color is used to highlight the importance of specific content,
the content should be written in such a way that it conveys its
importance without the use of color. This will benefit those who
require assistive technology to access information from a user
agent.
Color-blind people can easily be accommodated by using simple
markup, such as the <em> or <strong> tags. Some
assistive technologies may also be able to interpret these tags.
Checkpoint
Does the page contain a strong color contrast between hyperlinked
text and content text?
Explanation
It is important to have a strong color contrast between hyperlinked text
and content text, in particular for sites that utilize style sheets that
don't underline hyperlinks.
Guidelines
Although usability studies have indicated that the original choices
for hyperlink colors were unfortunate, people have ultimately
learned to associate blue with "unvisited link" and purple with
"previously visited link," to the point where sites that use other
colors for their links cause some level of confusion.
Although that in itself is more of a usability issue, take into
consideration the users who have preset their default Style Sheet
so that all pages appear with the font size and color that is
best suited for their visual abilities. Developers who use Style
Sheets to define their site's appearance must not allow the page
to override a user's default Style Sheet. This same practice
will, in turn, ensure that the browser's defined colors will be
rendered for all other users.
Also, on pages where the author overuses underlined words and
phrases, hyperlinks that are allowed to display the browser's
default colors will provide adequate contrast for those with
color-impaired vision.
Checkpoint
Is color used to show numeric value?
Explanation
In accounting, it is common to show negative monetary values with red font,
and positive values in black font.
Guidelines
Users who require assistive technology will not know what color
the numeric value is displayed in, so they won't know whether the
number is a positive or negative value. Consider the practice of
enclosing negative values within parenthesis ( ), or simply
including the negative sign.
Another common practice is to use different colors to show values
for different categories or groupings (e.g. government employee
work hours are shown in red, contractor work hours are shown in
blue, and total work hours are shown in black). In such a case,
you must label the numeric values with the name of the category or
grouping which it represents, so that those who use assistive
technology will know which category goes with which numeric value
(e.g. a properly marked up table will be read by assistive
technology as: Government workers: 135.5; Contractors: 346.0;
total: 481.5).
Numerical groupings that are displayed within tables can be
labeled using <th id=""> and <td headers="">, as
described in the
Tables guidelines.
Numerical groupings that are displayed without the use of tables
should contain text that clearly states their meaning.
Checkpoint
Is color used to show special values or meanings?
Explanation
Text displayed in red (or some other color) is often used to denote a
required field on an electronic form.
Guidelines
Both color-blind users and those who require assistive technology
could miss the fact that a particular field is required. Use a
special character, such as an asterisk (*), to show required
fields. Also, mention at the top of the form what special
character represents the required field indicator.
Another method of complying with this checkpoint is to include
the word "required" as part of the label for that field so that
users of assistive technology will hear it. A variation of this
method would be to place a graphical image of the special
character that identifies the field as required, then add the
value "required field" to the <img> tag's alt attribute.
|