WCAG 2.2 - Success Criterion
1.1.1 Non-text Content
Description
All non-text content that is presented to the user must have a text alternative that serves the equivalent purpose. This applies to images, icons, charts, graphs, audio, video, controls, and other non-text elements. The text alternative allows assistive technologies such as screen readers to convey the meaning of non-text content to users who cannot perceive it visually or aurally.
How To Test
- Identify all non-text content on the page: images, icons, buttons with images, charts, graphs, and multimedia.
- Inspect each image element and check whether an
altattribute is present. - For informative images, verify the
alttext accurately describes the content or function of the image. - For decorative images, verify
alt=""is used so screen readers skip them. - For functional images (such as a logo linking to the home page or an icon button), verify the
alttext describes the function, not just the appearance. - Use a screen reader (such as NVDA with Firefox or JAWS with Chrome) to navigate to each image and confirm what is announced matches the expected text alternative.
- For complex images such as charts, confirm a full text description is available either in the alt attribute, in surrounding content, or via a linked description.
Testing Tools
- NVDA — Free screen reader for Windows. Download, install, and open Firefox to test the demo. Navigate using Tab and arrow keys, and listen to role, name, and state announcements from the page.
- VoiceOver (macOS) — Built into macOS. Enable with Cmd+F5, then open Safari or Chrome to test the demo. Use VO+arrow keys to navigate and hear semantic structure announcements.
- Lighthouse — Browser accessibility audit in Chrome DevTools. Open DevTools (F12), go to Lighthouse, run the audit to identify semantic and labeling issues.
Demo 1: Complex Images (Charts)
This SVG chart has no accessible name. A screen reader announces nothing useful - it may say "image" or read a file path, conveying no chart data.
The same SVG now has role="img" and a descriptive aria-label. A screen reader announces the full chart description.
Code
Demo 2: Functional Icons and Buttons
Icon buttons without accessible names. Screen reader announces just "button" - no context about what each button does.
The same buttons now have aria-label attributes. Screen reader announces the purpose of each button.
Code
Demo 3: Decorative vs. Informative Images
Product images with poor alt text, and a decorative divider that's announced unnecessarily:
High-Performance Laptop
$999.99
Budget Laptop
$399.99
Informative product images have descriptive alt text, and the decorative divider is properly hidden:
High-Performance Laptop
$999.99
Budget Laptop
$399.99
Code
Demo 4: Image + Text Link Duplication
The product image and product name are separate links to the same page. Screen readers announce the link twice — once for the image (with duplicate alt text) and once for the text. Found in 8 real-world audits.
Screen reader announces "Ergonomic Office Chair, link" twice — redundant and confusing.
Image and text wrapped in a single <a> tag. The image uses alt="" since the text link already describes the destination. Screen readers announce the link once.
$349.99
Single link announced once: "Ergonomic Office Chair, link". Image hidden with alt="" and aria-hidden.
Code
Demo 5: Star Rating Without Context
Star icons are announced individually or the numeric rating has no context. Screen reader may say "4.2" with no indication that it means stars or the scale. Found in multiple real-world audits.
Screen reader may announce "star star star star star 4.2" with no meaningful context.
The star icons are hidden from AT with aria-hidden, and a visually-hidden text provides the full context. The visible number also has an aria-label.
Screen reader announces "4.2 out of 5 stars, based on 127 reviews" — complete context.
Code
Fail Explanation
A failure occurs when an image, icon, or other non-text element has no accessible name, an empty alt attribute where one is needed, or a meaningless description such as "image" or a file name like "img0042.jpg". Screen reader users will either hear nothing, hear the file name, or hear a generic label that provides no useful information about the content or purpose of the element.
Pass Explanation
A passing implementation provides a concise, meaningful text alternative that conveys the same information or function as the non-text content. Decorative images that add no information use an empty alt attribute (alt="") so screen readers skip them entirely. Complex images such as charts include either a descriptive long-form text alternative nearby or are linked to a full description.
Notes
Images used purely for layout or decoration must use alt="" rather than being omitted entirely; omitting the alt attribute causes some screen readers to read out the file name. ARIA attributes such as aria-label and aria-labelledby can also provide text alternatives for non-image non-text elements such as SVGs and custom controls.
Techniques
WCAG techniques used in this demo: H37, H67, H2, G94, F38, ARIA10
Suggested Solutions & References
Curated from 91 real-world audit findings and official WCAG guidance.
Official W3C / WAI
- Understanding SC 1.1.1: Non-text Content
- WAI Tutorial: Informative Images
- WAI Tutorial: Decorative Images
- Technique H37: Using alt on img elements
- Technique H2: Combining adjacent image and text links
- Technique G94: Short text alternative for non-text content
- Failure F38: Not marking up decorative images