How to write alt text that passes WCAG 2.1 AA
· alt text · WCAG · how-to
Alt text is the single most common accessibility gap on e-commerce sites — and under the European Accessibility Act it is no longer optional. The good news: writing it well takes seconds once you know the rules. This guide covers everything you need to get every image past WCAG 2.1 Level AA.
What alt text is for
Alt text is the description a screen reader announces in place of an image. It is also what shows when an image fails to load, and it gives search engines context. A good alt text lets someone who cannot see the image understand what it is and why it is on the page.
The four rules
- Describe the content and function, not the file. "Navy wool overcoat, knee-length, on a model" — not "IMG_4821.jpg".
- Keep it concise. Aim for one short sentence. Long descriptions belong in the surrounding text, not the
altattribute. - Skip "image of" and "photo of". Screen readers already announce that it is an image — the prefix just wastes the listener's time.
- Match the context. The same photo needs different alt text on a product page ("Red running shoe, side view") versus a checkout button ("Pay with card").
Good vs. bad, side by side
| Image | ❌ Weak | ✅ Strong |
|---|---|---|
| A product photo | photo | Beige linen tote bag with leather handles |
| A logo that links home | logo.png | Altvisor — go to homepage |
| A chart | chart | Sales grew from 12% to 47% between Q1 and Q4 |
Decorative images get an empty alt
If an image adds nothing for someone who cannot see it — a background texture, a divider, a purely ornamental flourish — give it an empty alt so screen readers skip it entirely:
<img src="/divider.svg" alt="" />
Leaving alt off completely is a failure; an empty alt="" is the correct, intentional signal for "decorative".
Let AI handle the first pass
For a catalogue with thousands of products, writing every line by hand is not realistic. Altvisor generates WCAG 2.1 AA-compliant alt text in Polish, German, Czech and English, then lets you review and edit before publishing. Start with a free accessibility check of your storefront to see how many images are missing alt text today.