Level A
Perceivable
WCAG 2.0+
Success Criterion 1.3.3: Sensory Characteristics
Official W3C Definition
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
Why This Criterion Matters
When instructions rely on sensory characteristics like shape, color, size, or location, users who cannot perceive those characteristics are excluded. Instructions must provide enough information to be understood regardless of sensory abilities.
Example of failure: "Click the round button on the right" - blind users cannot see shape or location; "Click the green button" - colorblind users may not distinguish green.
Who Benefits
Blind Users
Cannot perceive shape, size, color, or visual location references.
Color Blind Users
Cannot distinguish elements by color alone.
Deaf Users
Cannot perceive audio cues or instructions.
Different Device Users
Location-based instructions fail when layout changes on mobile.
How to Meet This Criterion
Technique 1: Use Text Labels with Visual Cues
Good Example - Multiple Cues
<!-- Good: Uses text label AND icon -->
<p>Click the <strong>"Submit"</strong> button to send your form.</p>
<button type="submit">
<i class="fas fa-paper-plane" aria-hidden="true"></i>
Submit
</button>
<!-- Good: Refers to button by its label -->
<p>To continue, select the "Next Step" button below.</p>
Bad Example - Sensory Only
<!-- Bad: Location-only reference -->
<p>Click the button on the right to continue.</p>
<!-- Bad: Shape-only reference -->
<p>Click the round button to submit.</p>
<!-- Bad: Color-only reference -->
<p>Required fields are marked in red.</p>
<!-- Bad: Sound-only reference -->
<p>A beep indicates the process is complete.</p>Technique 2: Combine Sensory and Non-Sensory Cues
Good Example - Combined Cues
<!-- Good: Color AND text indicator -->
<p>Required fields are marked with a red asterisk (*).</p>
<label for="name">
Name <span class="text-danger">*</span>
<span class="visually-hidden">(required)</span>
</label>
<!-- Good: Location AND label -->
<p>The search box labeled "Search products" is in the header.</p>
<!-- Good: Sound AND visual indicator -->
<p>A sound plays and a "Success" message appears when complete.</p>Common Scenarios
| Bad (Sensory Only) | Good (With Text Reference) |
|---|---|
| "Click the green button" | "Click the 'Accept' button (green)" |
| "See the sidebar on the left" | "See the 'Related Articles' section" |
| "Press the large button" | "Press the 'Continue' button" |
| "Use the menu above" | "Use the 'Products' menu in the navigation bar" |
| "Errors are shown in red" | "Errors are shown in red with an error icon" |
Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Color-only error indication | Colorblind users miss errors | Add icons and text messages |
| Location-only references | Fails on different screen sizes/layouts | Reference elements by their label |
| Sound-only notifications | Deaf users miss notifications | Add visual notifications too |
| Shape-only button identification | Screen readers don't convey shape | Use text labels on buttons |
Testing Methods
Manual Review
- Find all instructions: Search for directional words (above, below, left, right)
- Check color references: Look for color-only indicators (red, green, blue)
- Review shape references: Check for shape-based instructions (round, square, triangle)
- Test without seeing: Can instructions be understood without visual perception?
- Test without hearing: Are audio cues also communicated visually?
Screen Reader Test
- Navigate to instructions and check if they make sense without visual context
- Verify that button/link labels are used in instructions, not just visual descriptions
Related Criteria
1.4.1 Use of Color
Color not the only means of conveying information
1.3.1 Info and Relationships
Structure must be programmatically determinable