WCAG 1.1.1: Non-text Content
All non-text content (images, icons, charts, CAPTCHA) must have a text alternative that serves the equivalent purpose. This is fundamental for screen reader users and is one of the most commonly failed WCAG criteria.
What is WCAG 1.1.1 Non-text Content?
WCAG 1.1.1 Non-text Content is a Level A web accessibility success criterion under the Perceivable principle. All non-text content (images, icons, charts, CAPTCHA) must have a text alternative that serves the equivalent purpose. This is fundamental for screen reader users and is one of the most commonly failed WCAG criteria. Common failures include missing alt attributes on images entirely and using generic alt text like 'image' or 'photo' or the filename. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Check that all <img> elements have an alt attribute
- ✓ Verify alt text describes the image's purpose, not just its appearance
- ✓ Ensure decorative images have alt="" (empty alt) or are set via CSS
- ✓ Check that complex images (charts, infographics) have detailed text descriptions
- ✓ Verify form image buttons have descriptive alt text
Common Failures
- ✗ Missing alt attributes on images entirely
- ✗ Using generic alt text like 'image' or 'photo' or the filename
- ✗ Not providing alt="" for decorative images, causing screen readers to announce the filename
- ✗ Missing text alternatives for icon fonts or SVG icons
- ✗ Not describing the data in charts and graphs in text form
✓ Good Example
<!-- Informative image --> <img src="chart.png" alt="Sales increased 25% from Q1 to Q3 2025"> <!-- Decorative image --> <img src="divider.png" alt=""> <!-- SVG icon with text --> <button> <svg aria-hidden="true" focusable="false">...</svg> Save Document </button>
The informative image describes the chart's key message. The decorative image uses empty alt. The SVG icon is hidden from screen readers because the button text provides the label.
✗ Bad Example
<!-- Missing alt --> <img src="chart.png"> <!-- Generic alt --> <img src="team-photo.jpg" alt="image"> <!-- Icon-only button without label --> <button> <svg>...</svg> </button>
The first image has no alt attribute at all. The second uses meaningless alt text. The button has no accessible name because the SVG has no text alternative.
Test Your Site for 1.1.1 Compliance
Use our free accessibility tools to check your website against WCAG 1.1.1.
Open Testing Tool