Image alt text

What it is

The alt attribute on <img> provides a text alternative for an image. Screen readers announce it, browsers display it when the image fails to load, and crawlers use it to understand the content. An alt is required on every <img>; the value depends on what the image does on the page.

Why it matters

Images carry meaning. A product photo, a chart, an icon-only button, a decorative flourish — each plays a different role. Without an alt attribute, a screen-reader user hears the file name, or nothing at all, and loses that meaning. WCAG 1.1.1 is a Level A success criterion, which means failing it puts the page below the minimum bar.

How to implement

Choose the alt value by asking what the image is doing on this page.

Informative images — convey content. Describe what is shown, in the context of the surrounding copy.

<img src="bar-chart.png"
     alt="Sales by quarter: Q1 12k, Q2 18k, Q3 22k, Q4 30k.">

Functional images — act as a link or button. Describe the action, not the picture.

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

Decorative images — purely visual, add no information. Use an empty alt so assistive tech skips them.

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

Complex images — charts, maps, infographics. Use a short alt plus a longer description nearby (a caption, a paragraph, or a <figure>/<figcaption> pair).

Two further rules:

• Don't say "image of" or "photo of". The screen reader already announces "graphic".
• Don't use the file name. "DSC_0142.jpg" is worse than no alt at all because users can't skip past it cleanly.

Common mistakes

• Missing alt attribute entirely (different from alt="").
• Decorative images with descriptive alts that interrupt the reading flow.
• Functional icon-only buttons with alt="", leaving the button nameless.
• Duplicating the adjacent caption verbatim in the alt.
• Stuffing keywords into alt text for SEO.

Verification

• Run an automated checker — Equalize Digital and axe both flag missing and suspicious alts.
• Disable images in the browser and read the page top to bottom. Does it still make sense?
• Listen to the page with a screen reader; decorative images should be silent.