Skip to main content

Oregon State Flag An official website of the State of Oregon »

Oregon.gov Homepage

Avoiding Reliance on Visual Characteristics

Overview

Avoid using visual characteristics such as spacial references or color to communicate information. When providing written instructions consider whether the instructions are likely to make sense to a person who is accessing the page with a screen reader or Braille device. Specific examples are provided in the following sections.

Avoid Using Spacial References

Spacial references such as “click the circle on the right” are meaningless to a screen reader user, who can access the web page content but isn't likely to know its shape or its spacial position within the layout of the page. Instead, consider referring to the type and name of an object. For example, “the More Info button in the sidebar” is probably a more meaningful reference because it refers the object's name (“More Info”), its type (button), and its structural location as opposed to its spacial location (in the sidebar). As long as the web page is coded with good structural markup, this way of referring to an object on the page is likely to be helpful for everyone, including people who are unable to see the page.

Avoid Using Color to Communicate Information

Some users are unable to perceive color differences, or may not perceive color the same way you do. Therefore it is important to avoid using color alone to communicate information. For example, if link text is blue, it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text.

Another example is “required fields are in red”. It is okay to communicate “required” using red text, but In order to communicate this information to people who are unable to perceive color, there must be one or more additional ways of communicating the same idea. For example, required fields could include the word “required” as part of the label, or they could be tagged as required fields using the HTML5 required attribute, which is well-supported by browsers and assistive technologies.

External WCAG References

Most Details from this page were gleaned from the University of Washington's Accessible Technology section.