How to Write Good Alt Text: A Practical Guide to WCAG 1.1.1

Alt text (alternative text) is the text description of an image that screen readers announce to blind and low-vision users. Getting it right is fundamental to web accessibility — and one of the most misunderstood WCAG criteria.

The rules

• Informative images — describe the content and function: alt="Red running shoes, side view"
• Decorative images — use empty alt: alt="" (not missing, explicitly empty)
• Functional images (links, buttons) — describe the action: alt="Search", alt="Go to homepage"
• Complex images (charts, diagrams) — provide a longer description nearby or via aria-describedby

Common mistakes

• Missing alt attribute — the image tag has no alt at all
• Filename as alt — alt="IMG_2034.jpg" or alt="banner-v2-final.png"
• Keyword stuffing — alt="shoes buy cheap shoes online best shoes sale"
• Redundant with surrounding text — repeating the caption or heading
• "Image of..." prefix — screen readers already announce "image," so alt="image of a cat" becomes "image, image of a cat"

E-commerce alt text

For product images, include: product name, colour/variant, and distinguishing visual detail.

• Good: alt="Nike Air Max 90, white/grey, side profile view"
• Bad: alt="product" or alt="nike-air-max-90-white.jpg"

When to use empty alt

Decorative images that add no information should have alt="". This tells screen readers to skip them entirely. Examples: background patterns, visual separators, purely aesthetic icons next to text labels.