WCAG (Level A) SC 1.3.3 Sensory Characteristics (w3.org)
Issue description
WCAG 1.3.3, “Sensory Characteristics” addresses the need to provide information in a way that doesn’t rely solely on sensory characteristics like shape, size, visual location, orientation, or sound. This is important because:
- Visual disabilities: People who are blind or have low vision may not be able to perceive information conveyed only through visual means.
- Auditory disabilities: People who are deaf or hard of hearing may not be able to perceive information conveyed only through sound.
- Cognitive disabilities: Some people with cognitive disabilities may have difficulty understanding information presented solely through sensory characteristics.
Many websites use sensory characteristics as the only way to convey information. For example:
- Instructions based on location: “Click the button in the top right corner.”
- Identification by shape: “Select the circular icon.”
- Distinguishing by sound: “Listen for the beep to confirm your action.”
When information is presented solely through sensory characteristics, it creates barriers for people who cannot perceive those characteristics.
Essentially, this guideline ensures that information is presented in ways that can be understood by everyone, regardless of their sensory abilities. It promotes inclusivity and ensures that all users can access and understand the content.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.3.3, “Sensory Characteristics” involves providing information in ways that don’t rely solely on shape, size, visual location, orientation, or sound. Here’s how:
Provide text alternatives
- Labels and instructions: Include text labels and instructions that clearly identify and describe elements, regardless of their sensory characteristics.
- Example: Instead of “Click the green button,” use “Click the ‘Submit’ button.”
- Alternative descriptions: If referring to visual or auditory characteristics, provide alternative descriptions that convey the same information.
- Example: Instead of “Select the circular icon,” use “Select the icon that looks like a circle” or provide a text description of the icon’s meaning.
Use programmatic information
- ARIA attributes: Use ARIA attributes to provide additional information about elements that can be accessed by assistive technologies.
- Example: Use aria-label to provide a text label for an element that doesn’t have a visible label.
- Structure and semantics: Use proper HTML structure and semantics to convey information about the relationships between elements.
- Example: Use heading tags (
<h1>to<h6>) to create a hierarchy of information.
- Example: Use heading tags (
Combine sensory characteristics with other cues
- Redundancy: When using sensory characteristics, provide redundant cues that convey the same information through different means.
- Example: Instead of just saying “Click the button on the right,” also provide a text label for the button.
- Multiple modalities: Use a combination of visual, auditory, and textual cues to convey information.
- Example: Use a visual indicator, a sound notification, and a text message to alert the user of an event.
Avoid relying solely on sensory characteristics
- Instructions: Avoid giving instructions that rely solely on visual location, shape, or sound.
- Identification: Don’t rely on sensory characteristics alone to identify or distinguish elements.
Example
Instead of this: “To submit the form, click the round button at the bottom of the page.”
Use this: “To submit the form, click the ‘Submit’ button. It’s located at the bottom of the page.”
By following these practices, you can ensure that information is presented in ways that can be understood by everyone, regardless of their sensory abilities. This promotes inclusivity and makes your content accessible to a wider audience.
