Alt text that actually helps

Alternative text (the alt attribute) is the text a screen reader announces in place of an image, and what a browser shows if the image fails to load. Getting it right is one of the most common and most impactful accessibility fixes.

Informative images need a description

If an image conveys information, the alt text should convey the same information — concisely. Describe the meaning, not the pixels.

<!-- Weak -->
<img src="chart.png" alt="chart">

<!-- Better -->
<img src="chart.png" alt="Revenue grew 40% from Q1 to Q4 2025">

Decorative images should be silent

If an image is purely decorative — a background flourish, a divider — an empty alt attribute tells assistive technology to skip it. Omitting alt entirely is not the same: screen readers may then read the file name aloud.

<img src="divider.svg" alt="">

Functional images describe the action

When an image is a link or button, the alt text should describe the destination or action, not the picture.

<a href="/cart"><img src="cart.svg" alt="View cart"></a>

Complex images need more

Charts, diagrams and infographics carry more than a short phrase can hold. Give a brief alt summary and provide the full detail nearby — a caption, a data table, or adjacent text — so the information isn't locked inside the picture.

How to fix it

1. List every <img> that lacks an alt attribute.
2. For each, decide: informative, decorative, or functional.
3. Write a concise description, use alt="" for decorative, or describe the action for functional images.
4. For complex images, add a text alternative nearby and re-scan.