Guide

Alt text best practices: how to write good image descriptions

Last updated: 29 June 2026

Alternative text (the alt attribute on an image) is read aloud by screen readers and shown when an image fails to load. It's one of the most common accessibility issues on the web — and one of the easiest to get right once you know the rules. Missing or meaningless alt text fails WCAG Success Criterion 1.1.1 (Non-text Content). Here's how to write it well.

The three kinds of image

Before writing alt text, decide what role the image plays:

  • Informative — conveys meaning (a chart, a product photo, an icon with a message). Describe the information it carries.
  • Decorative — purely visual, adds nothing a sighted user couldn't get from the text (a background flourish, a divider). Give it an empty alt (alt="") so screen readers skip it.
  • Functional — it does something (a logo linking home, a magnifying-glass search button). Describe the action, not the picture (e.g. "Search", not "magnifying glass icon").

How to write good alt text

  • Convey the meaning, not the pixels. Ask: if the image vanished, what would the reader need to know? Write that.
  • Be concise. A short, specific phrase usually beats a long one. Put longer explanations in surrounding text or a caption.
  • Don't start with "image of" / "picture of." Screen readers already announce it's an image.
  • Match the context. The same photo might need different alt text on different pages depending on why it's there.
  • Don't repeat nearby text. If a caption already says it, give the image empty alt to avoid double announcements.
  • Include text that's inside the image. If a graphic contains words, put those words in the alt text.

Examples

  • Product photo: alt="Navy blue running shoe, side view" — not alt="shoe".
  • Logo that links home: alt="Acme — home" (functional: describe the destination).
  • Decorative divider: alt="" (skip it).
  • Chart: a short alt summarising the takeaway ("Sales doubled from 2024 to 2025"), with the full data in a nearby table or text.
  • Icon button: alt="Add to cart" — the action, not "shopping cart icon".

Common mistakes

  • Leaving alt off entirely (screen readers may read the file name, e.g. "IMG_4821 dot jpg").
  • Filling alt with keywords for SEO — it hurts users and reads as spam.
  • Describing decorative images that should be skipped, cluttering the experience.
  • Using the same generic alt ("image") on every image.

How to find missing/weak alt text

An automated scan flags images that are missing alt entirely — the clear failures. Scan your site free with WCAGwise to find them and see exactly which elements are affected. Note that a tool can confirm alt exists, but only a human can judge whether it's meaningful — so pair the scan with a quick manual review. For a fuller workflow, see how to check if your site is WCAG 2.2 AA compliant. WCAGwise is an audit aid, not a legal guarantee.

Related guides