WCAG 2.2 Guideline “1.3.3 Sensory Characteristics” Level A
Introduction
The WCAG 2.2 “1.3.3 Sensory Characteristics” guideline requires that instructions necessary for understanding and interacting with content do not rely solely on shape, color, size, position, orientation, or sound. This criterion is critical to ensure that users with visual or auditory impairments can comprehend the instructions.
This article explains the guideline with concrete examples, making it easy to understand for those new to HTML, CSS, and JavaScript.
1. What Does It Mean to Rely on Sensory Characteristics?
Examples of Inappropriate Instructions
- “Click the blue button in the top right corner”
→ Relies on position (top right) and color (blue). - “Click the arrow-shaped icon”
→ Relies on shape (arrow).
Such instructions can be challenging to understand for:
- Visually impaired users: They cannot perceive colors or shapes.
- Users with color blindness: They may not recognize specific colors.
- Users with cognitive disabilities: They may struggle with spatial orientation.
Examples of Appropriate Instructions
- “Click the button labeled [Submit]”
→ Provides textual information. - “Select ‘Settings’ from the menu”
→ Specifies the target action clearly.
2. How to Implement the Guidelines
a. Add Text Descriptions
When relying on sensory characteristics, always include supplementary text explanations.
Inappropriate Example
<p>Click the red button.</p>
<button style="background-color: red;">Submit</button>
Improved Example
<p>Click the red button labeled [Submit].</p>
<button style="background-color: red;">Submit</button>
Key Points
- Avoid relying solely on color. Clearly label the button with descriptive text.
b. Use Semantic HTML
Semantic HTML helps convey information accurately to assistive technologies.
Inappropriate Example
<div onclick="submitForm()" style="width: 100px; height: 50px; background-color: green;"> </div>
Improved Example
<button onclick="submitForm()">Submit</button>
Key Points
- Avoid relying solely on visual design. Use semantic elements like
<button>for clear functionality.
c. Provide Alternatives for Audio
If using sound to convey information, always provide a text alternative.
Inappropriate Example
- Audio announcement: “Press the button when you hear a beep.”
Improved Example
- Add a visual alternative to the audio announcement:
<p>Press the [Next] button to proceed.</p> <button>Next</button>
3. Common Mistakes and Their Solutions
a. Conveying Information Solely Through Color
Mistake
<p>Fields with a red background are required.</p>
Solution
<p>Fields marked with [Required] are mandatory.</p>
<form>
<label>Name <span>[Required]</span></label>
<input type="text">
</form>
b. Relying on Shape or Position
Mistake
<p>Click the arrow in the top right corner.</p>
<img src="arrow.png" alt="arrow">
Solution
<p>Click the [Next] button.</p>
<button>Next</button>
4. Implementation Tips
Prioritize Text
- Always provide instructions in text.
- Sensory characteristics can be used as supplementary elements, but always provide alternative information.
Use ARIA Attributes
- Use ARIA labels to provide additional information for users who cannot perceive visual cues.
Example
<button aria-label="Proceed to the next step">Next</button>
5. Benefits of Accessibility
Adhering to “1.3.3 Sensory Characteristics” benefits:
- Visually impaired users: They can understand content through assistive technologies.
- Users with color blindness: They can rely on alternative information instead of colors.
- Users with cognitive disabilities: Clear instructions reduce the chance of errors.
Conclusion
The WCAG 2.2 “1.3.3 Sensory Characteristics” guideline ensures that content interaction and comprehension do not rely solely on sensory characteristics like shape or color:
- Add textual instructions to supplement sensory characteristics.
- Use semantic HTML and ARIA attributes to improve accessibility for assistive technologies.
By following these practices, you take the first step toward creating web content that is accessible to all users!
We also offer the UUU Web Accessibility Widget Tool, making it easy to enhance accessibility. If you’re interested in improving accessibility, check it out!