Task

Add descriptions to sensory-based instructions

Category: 
Appearance
Where: 
Style panel
When: 
Design
Check as complete
Copy link Copied!

​​Instructions for understanding content and accomplishing tasks shouldn’t rely solely on characteristics like shape, color, size, visual location, orientation, or sound.

The Webflow Dashboard’s previous empty state, with the text “Hmm... that blue button must be important...” referring to a blue “New project” button also on the dashboard
This prompt relies solely on the color of the button to describe it, which isn’t helpful for Blind people or those with low vision or color blindness.
The Webflow Dashboard’s improved empty state, with the text “Hmm... that New Project button must be important...” referring to the same “New project” button also on the dashboard
The improved prompt refers to the button by its label, making it a much more accessible instruction.

​​For example, an instruction to “Click the blue button” isn’t helpful for users who can’t see color. A prompt to “Start recording after the tone” with no other visual information will be inaccessible to someone deaf or hard of hearing. Referencing “information in the right column” won’t work for users who’ve zoomed their browser to 300% and can only see a single-column mobile view of your page.

​​Write clearly and use more indicators

​​Use a combination of characteristics, particularly the actual names of sections and elements. For example, instead of “Click the circle icon,” write “Select the Flag for Later button.”

WCAG reference:

1.3.3 Sensory Characteristics

←
Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress