Loading...
Loading content...
Loading content...
Don't rely on shape, size, or location alone for instructions (e.g., 'click the round button').
Why it matters: Blind users cannot see shapes or locations. Deaf users cannot hear sound cues.
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.
What This Means: This success criterion requires that instructions for understanding or operating content must not rely solely on sensory characteristics that some users cannot perceive. Instructions should not depend only on shape, color, size, visual location, orientation, or sound cues. Instead, they should use accessible names, labels, or text descriptions.
Why It's Important: Users who are blind cannot see shapes, colors, sizes, or visual locations. Users who are deaf cannot hear sound cues. Users with cognitive disabilities may have difficulty remembering or distinguishing sensory characteristics. When instructions rely solely on these characteristics, these users cannot follow the instructions effectively.
Instead of saying 'click the round button' or 'use the button on the right', say 'click the Submit button' or 'use the button labeled Submit'. Instead of 'listen for the beep', provide a text alternative like 'wait for the confirmation message'. Ensure all interactive elements have accessible names (labels, aria-label, or visible text) so instructions can reference them by name rather than appearance.
This criterion ensures that blind users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that deaf users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Instruction says 'click the round button' - blind users can't see shapes.
<!-- Instruction: "Click the round button" -->
<button>Submit</button>Instruction says 'click the Submit button' - accessible to all users.
<!-- Instruction: "Click the Submit button" -->
<button>Submit</button>Instruction says 'use the button on the right' - screen reader users can't see layout.
Instruction says 'use the Search button' - accessible by name.
This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.3.3 Sensory Characteristics are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
It's okay to say 'click the red button' if the button is obviously red.
Blind users can't see color. Instructions must use names or labels that are programmatically determinable, like 'click the Submit button'.
I can mention location if I also provide the name.
While providing both is better than just location, it's best practice to use names primarily. Location can be mentioned as additional context, but shouldn't be the primary identifier.
Instructions like 'click the round button' or 'use the button on the right'.
Use element names or labels. Instead of 'click the round button', use 'click the Submit button' or 'click the button labeled Submit'.
Instructions referencing 'the red button' or 'the green icon'.
Use accessible names. Instead of 'click the red button', use 'click the Delete button' or 'click the button labeled Delete'.
Instructions saying 'use the button at the top' or 'the link on the left'.
Use names or labels. Instead of location-based instructions, use 'use the Navigation button' or 'click the Home link'.
Note: These are official W3C resources for 1.3.3. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.3.3 Sensory Characteristics correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.3 Adaptable