Images Need Alt: How to Fix Missing Alt Text

What this check flags

This check fires when an <img> on your page has no alt attribute at all, so there is nothing for a screen reader to read and nothing for a search engine to use when the image cannot be interpreted from pixels alone. It is the most common image-accessibility failure, it maps to WCAG 2.1 Success Criterion 1.1.1 (Non-text Content), and it doubles as an SEO miss because alt text is a genuine ranking and image-search signal.

The failing markup, and the fix

Here is a product card as a crawler and a screen reader receive it. Two of the three images are unreachable to anyone not looking at the screen:

<a href="/boots/alpine-gtx/">
  <img src="/img/alpine-gtx.jpg" width="400" height="400">
  <h3>Alpine GTX Hiking Boot</h3>
</a>

<img src="/img/divider.png">

<img src="/img/badge-waterproof.svg">

The product photo has no alt, the divider is pure decoration, and the badge carries information ("waterproof") that exists only in the image. Each needs a different treatment, and that distinction is the whole game:

<a href="/boots/alpine-gtx/">
  <img src="/img/alpine-gtx.jpg" width="400" height="400"
       alt="Alpine GTX waterproof hiking boot, side view">
  <h3>Alpine GTX Hiking Boot</h3>
</a>

<!-- decorative: empty alt so screen readers skip it -->
<img src="/img/divider.png" alt="">

<!-- informative: the meaning lives in the image -->
<img src="/img/badge-waterproof.svg" alt="Waterproof">

The rule of thumb: if the image conveys information, describe that information. If it is purely decorative, give it alt="" so assistive tech skips it cleanly. A missing attribute is not the same as an empty one, and the check only passes when every <img> makes a deliberate choice.

Decorative vs informative, at a glance

How to detect it on your own site

1. Screaming Frog. Crawl, then open the Images tab and filter by Missing Alt Text. The bulk export lists every offending image URL alongside the page it appears on, which is the fastest way to size the problem across a whole site.
2. axe DevTools. Run it on a template page. Images with no alt report under the image-alt rule, "Images must have alternate text," with the exact node highlighted.
3. curl for a spot check. curl -s https://example.com/ | grep -o '<img[^>]*>' | grep -vi 'alt=' prints every <img> tag with no alt attribute on that URL.

How to fix it

1. Export the missing-alt list so you are working from data, not guessing page by page.
2. For each image, decide its role: decorative gets alt=""; informative gets a concise, specific description.
3. Fix at the source. If images are rendered by a template (product loop, blog featured image, CMS block), patch the template so the attribute is always emitted rather than editing hundreds of pages by hand.
4. In WordPress and most CMSs, set the alt text in the media library or block settings so it persists everywhere the image is reused.
5. Skip keyword stuffing. Write what a person would say describing the picture; the SEO benefit follows from accuracy, not repetition.
6. Re-crawl to confirm the missing-alt count drops to zero, and sanity-check a few pages with a screen reader.

FAQ

Isn't an empty alt attribute the same as a missing one?

No, and the difference matters. A missing alt makes a screen reader guess, often reading the filename aloud. An explicit alt="" tells assistive tech "this is decorative, skip it," which is exactly the right behavior for spacers and flourishes. Empty on purpose passes; absent does not.

Does alt text actually help SEO or just accessibility?

Both. Google uses alt text to understand images for Google Images and as on-page context, and it is the text shown if the image fails to load. Accurate alt is one of the few places where the accessibility fix and the SEO win are the same edit.

How long should alt text be?

Long enough to convey the meaning, rarely more than a sentence. Screen readers read it verbatim, so a paragraph is punishing to listen to. For a chart or complex graphic, keep the alt short and put the full detail in nearby body text.

What about images added by page builders or CSS backgrounds?

CSS background-image is invisible to this check because there is no <img> tag, but that also means it is invisible to assistive tech; if it carries meaning, use a real <img> or an ARIA label. Page builders usually expose an alt field per image block, so set it there.

Is this the same as the "alt text repeats" or image-map checks?

No. This one is about images with no alt at all. Duplicated or filename-style alt is a separate quality issue, and clickable hotspots are covered by the image map area elements check.

For the fundamentals, see the alt attribute glossary entry and our full image SEO guide. Vector graphics have their own rules in SVG images and graphics require accessible text.