Missing Alt Text on Images

Overview

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

The Problem

This pattern is inaccessible — avoid it.

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

The Fix

Use this accessible pattern instead.

<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. 1

   Find all <img> elements on the page.

2. 2

   Add an alt attribute to every <img>.

3. 3

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

4. 4

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

5. 5

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

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