Provide text-based clues to help users perceive content

Applicable Role(s): Content Creator, Developer

Overview

Describing content in solely visual ways, such as "above," "below," or “to the left” won't convey for people that are blind, have low vision, or use the structure of the webpage to navigate. Users that have color vision deficiencies or adjust browser style sheets may also miss elements described by color or shape.

Providing textual clues along with visual descriptors makes it easier for users to find content. Additionally, layouts may change with different devices—so features to the left of content on desktop may be above content on mobile, or disappear behind a mobile menu instead of staying above main content.

Best Practices

Tell users what a feature is called and what kind of element it is. This makes it easier for users that have to navigate by voice commands to pick which content to use and activate. People using screen readers can also find the element in listings of similar elements (i.e. lists of headings, links, images, etc.).

Use a combination of descriptors like shape, size, location, orientation along with with color/text. Don't use color alone to convey information on a page.

Pattern Examples

Visual vs. Semantic Descriptions
Instead of Use
Click the green arrow to proceed. Click the green arrow button labeled "Next."
Refer to the document above...

Refer to the [name of document] under the section called [name of section].

Example: Refer to the Western policy about social media under the "Policies" section, near the top of the page.

Use the links on your left...

You can find resources in the [name of menu] navigation menu.

Example: You can find resources under the "Useful Links" navigation menu

Click the links below...

Students can click the [link text] link...

Students can click the blue "Student Resources" link.  Faculty can click the green "Staff Resources" link.

CodePen Example: Sensory Characteristics