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: describe the action. Informative: convey the information. Brevity matters.
Are CSS background images covered?
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 text.
Other Perceivable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.