Success Criterion 1.3.3 Sensory Characteristics: Level A
How to Meet this Success Criterion
To be compliant you will need to provide the user with instructions which refer to shapes, color, sound or visual location of web content.
Make sure your instructions include and reference HTML text based markers which can easily be located using assisted technologies such as screen readers.
- Make sure that instructions do not solely rely on shape, color, sound or location of a user control or area of a web page
- Include the heading text of the content you want the user to navigate to in your instructions. The heading will serve as a marker to navigate to the content for screen reader users
- Include the text label of a button as part of your directions to the user so they know which button control they need to use
Fail and Pass Examples for SC 1.3.3 Sensory Characteristics
Blind and low vision users cannot find a control based on location, color, shape or sound. They need additional instructions such as a reference of the text of a control or a heading right above to find the location of the control or area.
Click the blue button to go to the next page.
Click the blue button labeled "next" to go to the next page.
Fill out the form on your right.
Fill out the form on your right with the heading "Contact Us".
Events marked with a red circle are sold out.
Events marked with a red circle which have the letter "x" inside are sold out.
Please note: In the 3rd example I describe a red circle with the letter "x" inside. Using HTML based text and not an image for the letter "x" will allow screen reader users to be able to find the "sold out" area. You can use CSS to position the letter "x" off the screen. Make sure you don't set "display:none" on the element, since that would prevent the screen reader from reading it.
Some Common Failures for SC 1.3.3 Sensory Characteristics
- Using shape or location alone to identify content (example: left, right, triangle or blue arrow, etc.)
- Using a graphical symbol alone to convey identification (example: ASCII character depicting an arrow with no text alternative)
How to test: Check if your website includes directions on how to use or navigate content on your site. Make sure the instructions don't rely on shape, color, sound or location alone. Include text based references such as button text or headings which are accessible for screen reader users.