Skip to main content

How to Fix Missing Image Alt Text

A step-by-step guide to writing good alternative text, fixing missing alt attributes, and handling decorative images for WCAG 1.1.1 conformance.

Last updated

Missing alternative text is one of the most common — and most fixable — accessibility issues. When an image lacks an alt attribute, screen readers may announce the file name or skip it entirely, leaving users without information that sighted visitors get instantly.

This guide is informational and not legal advice.

The rule in plain terms

Every image that conveys information needs a text alternative. Images that are purely decorative should be hidden from assistive technology with an empty alt.

How to fix it

1. Add descriptive alt text to informative images

<!-- Before -->
<img src="golden-retriever.jpg">

<!-- After -->
<img src="golden-retriever.jpg" alt="A golden retriever puppy sitting in tall grass">

Describe what the image communicates, not how it looks pixel by pixel. Keep it concise.

2. Use empty alt for decorative images

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

An empty alt="" tells screen readers to skip the image. Omitting alt entirely is not the same — that's the failure case.

3. Handle images of text

If an image contains text (a logo with a tagline, for example), put that text in the alt:

<img src="logo.png" alt="Acme Bakery — Fresh Daily">

Writing good alt text

  • Be specific and contextual: the same photo may need different alt text on different pages.
  • Don't start with "Image of…" — screen readers already announce that it's an image.
  • For complex visuals like charts, provide a short alt plus a longer description nearby.

How to verify

Re-scan the page, then tab through it with a screen reader to confirm each meaningful image is announced sensibly and decorative ones stay silent.