WCAG 2.1 · Level A · Perceivable
WCAG 1.1.1 — Non-text Content, explained with examples
All non-text content (images, icons, controls) must have a text alternative that serves the equivalent purpose. Screen readers cannot interpret pixels. Without alt text or accessible names, users who rely on assistive technology cannot understand product photos, navigation icons, decorative graphics, or interactive controls represented by images.
- Number
- 1.1.1
- Level
- A
- Principle
- Perceivable
- Guideline
- 1.1 Text Alternatives
Why this criterion exists
Screen readers cannot interpret pixels. Without alt text or accessible names, users who rely on assistive technology cannot understand product photos, navigation icons, decorative graphics, or interactive controls represented by images.
If you only remember one thing: all non-text content (images, icons, controls) must have a text alternative that serves the equivalent purpose. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Non-text Content affects:
Screen reader users (blind and low-vision)
Users with images disabled (slow networks, data savers)
Users using voice control software that needs accessible names
Search engine crawlers indexing image content
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Decorative images without alt="" (announced as "graphic")
Informative images with empty alt or alt="image" / alt="logo"
Icon-only buttons missing aria-label or visible text
Background images carrying meaning (set via CSS, invisible to AT)
CAPTCHA images without an alternative
How to test for it
Navigate the page with a screen reader (VoiceOver, NVDA) and listen to image announcements.
Run an automated scanner — alt issues are deterministically detectable.
Disable images in your browser; if the page is now incomprehensible, alt text is missing.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Decorative images get alt="" so screen readers ignore them. Icon-only controls get aria-label so the control has an accessible name even though the image alt is empty.
The problem
<img src="/cart.svg">
<button><img src="/menu.svg"></button>The fix
<img src="/cart.svg" alt=""> <!-- decorative, hidden from AT -->
<button aria-label="Open menu">
<img src="/menu.svg" alt="" />
</button>Decorative images get alt="" so screen readers ignore them. Icon-only controls get aria-label so the control has an accessible name even though the image alt is empty.
Frequently asked questions
Should I describe every image with long alt text?
No — match the alt text to the image's purpose. Decorative: alt="". Functional (like a button icon): describe the action, not the image. Informative: convey the information. For complex charts or graphs, a short alt paired with a detailed nearby text description works best. Brevity and accuracy beat length every time.
Are CSS background images covered by 1.1.1?
If the background image carries meaning, yes — but you cannot add alt to CSS. Use an <img> tag with alt, or expose the meaning in adjacent visible text. Decorative CSS backgrounds are fine to leave without a text alternative because they are invisible to assistive technology by default.
Has missing alt text ever triggered a real lawsuit?
Yes. In Robles v. Domino's Pizza (9th Cir. 2019), the court found a website accessible under the ADA and remanded for trial. Missing alt text was among the issues cited. In Gil v. Winn-Dixie (S.D. Fla. 2017), the court found the grocery chain's website violated the ADA, with image accessibility among the failures. Both are well-documented public cases.
What should alt text say for a product photo?
Describe what a sighted shopper would want to know: the product name, key visual attribute, and distinguishing detail. For a shoe listing: "Red leather Oxford, size run small note." Avoid starting with "Image of" — screen readers already announce it as a graphic. Skip marketing copy; the alt is informational, not promotional.
Do SVG icons need alt text?
If the SVG is inside a <button> or <a> that has an accessible name from another source (aria-label, visually-hidden text), the SVG itself should get aria-hidden="true". If the SVG stands alone and conveys meaning, add role="img" and a <title> element as a fallback. The goal is one clear accessible name for the control, not two competing ones.
How do automated scanners detect this?
Missing alt attributes and alt="image" / alt="photo" patterns are deterministically detectable by tools like axe-core, Lighthouse, and Certvo. However, whether the alt text is accurate requires human judgement. An automated scan is the fastest first pass; a manual review of image content is the second step.
Other Perceivable criteria
1.3.1 Info and Relationships
Perceivable · Level A
1.4.3 Contrast (Minimum)
Perceivable · Level AA
1.4.11 Non-text Contrast
Perceivable · Level AA
1.2.2 Captions (Prerecorded)
Perceivable · Level A
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
How to fix: missing alt text on images
Fix recipe · 1.1.1
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.