Missing alt text on images.

The problem

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 among the most common WCAG failures on the web—flagged on roughly half of all home pages in WebAIM’s annual analysis, second only to low color contrast—and it’s frequently cited in ADA lawsuits precisely because it’s so easy to detect and prove.

The fix

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

<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. 1Find all <img> elements on the page.
2. 2Add an alt attribute to every <img>.
3. 3For decorative images (icons, spacers), use alt="" (empty string, not missing).
4. 4For informative images, write a concise description of what the image conveys.
5. 5For 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—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.

In your framework

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

Questions