1.1.1 Non-text Content

Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

Every non-text element on your page — images, icons, charts, videos, audio, CAPTCHAs — must have a text alternative that serves the equivalent purpose. If a screen reader encounters an image with no alt text, the user has no idea what the image shows.

This is one of the most commonly violated WCAG criteria and one of the easiest to fix.

Who This Affects

Blind users using screen readers — they rely entirely on text alternatives
Low-vision users who magnify the screen — alt text appears when images fail to load
Users on slow connections who disable images
Search engines — alt text helps with SEO

Common Pitfalls

1. Missing alt attribute entirely

<!-- Bad -->
<img src="team-photo.jpg">

2. Empty alt on meaningful images

<!-- Bad: hides meaningful content -->
<img src="quarterly-chart.png" alt="">

3. Useless alt text

<!-- Bad -->
<img src="ceo.jpg" alt="image">

4. Icon buttons without labels

<!-- Bad -->
<button><svg><!-- search icon --></svg></button>

How to Fix

Meaningful images

<!-- Good -->
<img src="team-photo.jpg" alt="Engineering team at the 2026 company retreat">

Decorative images

<!-- Good: screen readers skip this -->
<img src="divider.png" alt="">

Icon buttons

<!-- Good -->
<button aria-label="Search">
  <svg aria-hidden="true"><!-- icon --></svg>
</button>

Linked images

<!-- Good: describes where the link goes -->
<a href="/profile">
  <img src="avatar.jpg" alt="View your profile">
</a>

How to Test

Open DevTools (F12), go to the Elements panel, and search for all <img> tags. Check each one for a meaningful alt attribute.
Look for icon buttons (<button> or <a> containing only an <svg> or <img>) and verify they have aria-label or visible text.
Disable images in the browser (Chrome DevTools > Rendering > disable images, or use a browser extension) and read through the page to confirm all content still makes sense.
Open a screen reader (VoiceOver: Cmd+F5, NVDA: Ctrl+Alt+N) and navigate to each image, icon, and non-text element. Verify the announced description is meaningful and accurate.
Check <input type="image"> elements and elements with role="img" for appropriate alt text.
Pass: Every meaningful image has descriptive alt text, decorative images have alt="", and icon buttons have accessible names.
Fail: Any meaningful image is missing alt text, has vague text like "image" or "photo," or any icon button lacks an accessible name.

axe-core Rules

| Rule | What It Checks | |------|---------------| | image-alt | <img> elements must have alt attribute | | input-image-alt | <input type="image"> must have alt | | role-img-alt | Elements with role="img" must have alt text | | svg-img-alt | <svg> with role="img" must have accessible name |

Tools

Test this criterion with the Alt Text Reviewer.