Skip to lesson content
WCAG 1.1.1 · Level AEasy5 min readImages

Missing Alt Text on Images

Overview

Images must have text alternatives that describe the content or function of the image.

Alt text is the foundation of an accessible website. When a screen reader hits an image with no alt attribute, it often reads the file name aloud (“IMG_4032.jpg”) or skips the image entirely, leaving blind and low-vision users with no idea what’s there. Missing alt text is the single most common WCAG failure on the web—flagged on roughly half of all home pages in WebAIM’s annual analysis—and it’s frequently cited in ADA lawsuits precisely because it’s so easy to detect and prove.

WCAG Criterion:1.1.1
Conformance Level:Level A
Difficulty:Easy
Time to fix:~5 min
Category:Images

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
<img src="hero.jpg"> <img src="icon.svg"> <img src="chart.png">

The Fix

Use this accessible pattern instead.

[ CORRECT ]
<img src="hero.jpg" alt="Developer typing code on a laptop"> <img src="icon.svg" alt=""> <!-- decorative: empty alt --> <img src="chart.png" alt="Bar chart showing 40% increase in Q4 revenue">

Step-by-step

  1. Find all <img> elements on the page.

  2. Add an alt attribute to every <img>.

  3. For decorative images (icons, spacers), use alt="" (empty string, not missing).

  4. For informative images, write a concise description of what the image conveys.

  5. For images that contain text, include that text in the alt value.

Common Mistakes

  • Omitting the alt attribute entirely instead of using alt="" for decorative images.

  • Stuffing keywords into alt text for SEO instead of describing the image.

  • Writing “image of…” or “photo of…”—screen readers already announce it as an image.

  • Leaving the CMS or camera file name as the alt value.

How to Test for It

  • Run an automated scan (ADAGuard, axe, WAVE)—missing alt is reliably caught.

  • Disable images in your browser and check the page still makes sense.

  • Use a screen reader (VoiceOver, NVDA) and listen as it reaches each image.

Framework Notes

How to apply this fix in your stack.

// React — pass alt as a prop <img src={src} alt={description} /> // Decorative <img src={icon} alt="" aria-hidden="true" />

FAQ

Related lessons