Sensory Information WCAG 2.0 States

advertisement
Sensory Information
WCAG 2.0 States
“1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not
rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or
sound. (Level A)”
Introduction
For some individuals with disabilities, information that relies solely on sensory characteristics, such as
perceptions of shape, sound, or color are not accessible. Visit the guideline about color to learn more
about proper use of color.
When providing content where using shape is appropriate or desired, always make sure that there is
another signifier for what the purpose of the shape is.
Conveying Information
Color
Don't rely on color alone to convey the meaning of content. Individuals who are blind, low-vision, or
colorblind will not be able to differentiate between the content you are trying to emphasize or highlight.
Some examples of where using color only can affect accessibility include: required fields in forms,
identifying that items of a certain color are key concepts to learn, using a pie chart with color but not
identifying the sections in another way.
In the inaccessible example image below, a simple form requires users to fill out at least the information
in red.
Shapes
For example, if an image of a stop sign was used to signify to the reader very important content, there
should always be an alternative text of that image that matches the desired meaning.
It is also good practice to not rely on one sensory characteristic alone to convey meaning. Just like the
examples on the Color guidelines, make content work for the widest possible audience by thinking
about who might be viewing your site, and where the barriers might be for someone to gather full
meaning.
Images
For example, if an image of a green arrow was used to signify go to the next page, there should be
an alternative text of that image that matches the desired meaning. For the green arrow, the label for
the alt text should be "Next" and provide some instructions on the page with the effect of, "To move to
the next page, select the green arrow icon labeled Next in the lower right of the page."
In addition to these items, never use instructions that rely on the perception of shape, color or (for the
most part) location alone. If the instructions are trying to orient a user to a page, avoid using language
similar to the following:



Look for more information in the section to the right
The up arrow will take you back to the top of the page
Important concepts are found in red
These instructions would rely on someone's sensory characteristics that might not be available. Instead
if sensory instructions are used, include other cues for orientation similar to the following:



More information can be found in the "More Information" section to the right
The up arrow labeled "top of page" will take you back to the top (and make sure you code the
alt text of the arrow image properly with "top of page")
Important concepts can be found in red and are bold (using <strong> emphasizes text to screen
reader users as well) - usually the voice changes - never use <b> use <strong> instead.
GHC’s website is already programmed when the “Bold” button is selected to code <strong> and “Italics”
is coded with <emphasis> which provides accessibility for a screen reader.
Download