1.1.1 Non-text Content
Official description of the success criterion
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
- CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
What to do?
Provide text alternatives for all non-text content.
Why is it important?
Text alternatives help convey the purpose and meaning of non-text content to assistive technologies like screen readers.
Common pitfalls
The most common things I see are issues with image alt texts. The alt tag might be completely missing or the alt text is not descriptive.
Another common issue is not localizing the alt texts for all languages.
Remember that the definition of a decorative image is subjective.
How to test for it?
With images make sure to check the following:
- Ensure that the alt tag is always present.
- If the image is decorative, the alt tag should be empty or null.
- If the image has meaning, the alt text should describe the image.
Related criteria: Some people mark missing localizations of alts under this criterion, some under 3.1.2.
How to take this criterion into account in development?
Always ensure an image has the alt tag present. Allow the content editor to leave the alt text empty, but the alt tag should be present in those cases as well.
If you add images in code, ensure all non-decorative images have an alternative text that is localized. Describe what the image contains. If the link acts as a link, then describe the link target instead of the image.