WCAG Principle: Operable
Guideline 1.3: Adaptable (Create content that can be presented in different ways without losing information or structure)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 1.3.3?
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.
Instructions or information needed to understand or operate the web content must not only rely on visual or auditory cues such as an object’s shape, size, location, orientation, or sound clues. This does not completely rule out the use of shape or location to provide information so long as the information can be understood in other ways, e.g from textual instructions.
How does it make your website accessible?
Visual and auditory clues like an object’s size, shape or location are not programmatically determinable. That means assistive technology users cannot perceive them or understand their meaning and significance in the content. Providing additional instructions helps them interact fully and correctly with the content.
Who benefits?
- People with visual impairments (blindness or low vision) who cannot see visual cues.
- People with cognitive disabilities who cannot understand clues based only on shape, size, or location.
- People with hearing impairments who cannot understand audio clues.
How to Meet Success Criterion 1.3.3
Common mistakes:
- Content can only be identified by its visual shape or location.
- Only graphical symbols (image, image of text) are used to convey information.
How to fix mistakes:
- Provide HTML text-based markers that can be easily located by assistive technologies such as screen readers in your instructions.
- Provide headings with meaningful text to help users easily navigate to sections of content.
- Ensure that buttons have label text as part of directions to help users interact with it correctly.
Helpful tips for developers:
- Be sure to add descriptive text when representing data with a symbol.
- When utilizing a side menu for a page or blog, give the side menu a title that you can refer to in the text.
- Supplement sound alerts, with visual alerts such as text, color, and icons.
How to test if you’ve met compliance:
- Locate all references to shapes, sizes, or positions of objects on the Web page.
- In each case confirm that the reference includes any additional information that makes it possible to locate and identify an item without knowing its shape, size, or relative position.
Bad and Good Examples (Developer Code)
Bad Code Snippet
<button>
<img src="submit-icon.png">
</button>This code snippet does not meet conformance with Success Criterion 1.3.3 because it does not provide a text alternative for the image. The alt attribute is missing, which means that users who are visually impaired and use assistive technologies will not be able to understand the purpose of the button.
Good Code Snippet
<button aria-label="Submit Form">
<img src="submit-icon.png" alt="Submit Icon">
</button>This code snippet demonstrates conformance with Success Criterion 1.3.3 because it provides additional information through the alt attribute to help users understand the purpose of the button, even if they can’t perceive the visual image.
The alt attribute describes the image as a “Submit Icon,” which provides a text alternative for users who use assistive technologies. Also, the aria-label attribute provides even more context by explicitly stating that the button is for submitting a form.
Frequently Asked Questions
What is considered a sensory characteristic?
Sensory characteristics of components are things like shapes, sounds, positioning, orientation, sound, color, and size. When considering the accessibility of a web page, instructions or information can’t only rely solely on these characteristics for users to understand them.
What are some techniques that can be used to meet this criterion?
Some techniques that can be used to meet this criterion include providing text alternatives for non-text content, such as images or videos, providing captions and audio descriptions for videos, and providing alternatives for color-coding or other sensory characteristics used to convey information.
What are the consequences of not meeting this criterion?
The consequence of not meeting this criterion is that it results in barriers that prevent users with disabilities from accessing and understanding the content on a website. This can result in legal liabilities and reputational damage for the website owner.
