SC 1.1.1: Non-text Content
Normative Text
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. Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. 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. 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.
Understanding 1.1.1
Every image, icon, chart, or other non-text element must have a text alternative that serves the same purpose as the original.
How to Comply
Use the alt attribute on <img> elements. For meaningful images, write concise alt text that conveys the information or function — not a description of what the image looks like ('red warning triangle') but what it means ('Warning: your session will expire'). For complex charts, provide a data table or long description. For decorative images that add no information, use alt='' so screen readers skip them entirely. For icon buttons with no visible text, the aria-label on the button is the text alternative — not alt text on the icon itself.
Common Failures
- ✕Missing alt attribute entirely
- ✕alt='image' or alt='photo' — these are meaningless
- ✕Using the file name as alt text (e.g., alt='img_header_2024.jpg')
- ✕Decorative images with descriptive alt text that is read aloud unnecessarily
- ✕Complex charts with only a vague description ('Bar chart showing data')
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.1.1.1.
- ★Backward compatible with WCAG 2.1: Yes.
Mandatory Under
Testing with VoiceOver (macOS) / NVDA (Windows)
- 1.
Navigate to the page containing images.
- 2.
macOS: Press CMD+F5 to start VoiceOver. Windows: Press NVDA+N, then browse the page.
- 3.
Use Tab key to reach each image element.
- 4.
Verify that a descriptive text alternative is announced for each meaningful image.
- 5.
For decorative images (spacers, dividers), verify they are completely ignored by the screen reader.
- 6.
For complex images (charts, graphs), verify the full data is conveyed in the alt text or a linked long description.
- 7.
Inspect the HTML: confirm <img alt='...'> is present, non-empty, and meaningful.
- 8.
Pass: All meaningful images have descriptive alt text. Decorative images use alt='' or role='presentation'.