Alternative text for images

Alt text ensures that people using screen readers or with images disabled can still understand the purpose of an image. It’s not just an accessibility requirement, it’s also essential for usability, content clarity, and SEO.

Good alt text conveys the function and meaning of an image, not just what it looks like. Writing it requires careful consideration:

• What is the image’s purpose?
• Is it decorative or functional?
• Would users miss important context if the image were invisible?

Done right, alt text makes digital experiences inclusive, discoverable, and reliable.

Guidelines for writing effective alternative text for images.

Describe the purpose, not appearance

Focus on what the image communicates, not unnecessary details. For example, “Search icon” instead of “Magnifying glass.”

References:

• Alternative text basics – WebAIM
• WCAG 1.1.1: Non-text content

Keep it concise and clear

Alt text should usually be under 125 characters for effective screen reader support. Long descriptions should go in surrounding text or <longdesc>.

References:

• Alt text: What to write – Nielsen Norman Group

Mark decorative images as null

Purely decorative images should use alt="" so screen readers skip them, avoiding noise.

References:

• WCAG 1.1.1: Non-text content
• Inclusive components – Heydon Pickering

Use context-sensitive descriptions

Tailor descriptions to the image’s function. The same image may need different alt text depending on context (for example: “Company logo” vs “Home link”).

References:

• A web for everyone – Sarah Horton & Whitney Quesenbery

Avoid redundancy

Don’t repeat information already in adjacent text. Screen reader users shouldn’t hear the same thing twice.

References:

• Alternative text basics – WebAIM

Include text in images as alt text

If the image contains text that is important to understanding, the alt text must include it. Decorative text (like in backgrounds) should be ignored.

References:

• WCAG 1.4.5: Images of text

Frequent mistakes when writing alt text.

Writing “image of” or “picture of” in every alt text

Screen readers already announce it as an image, so it’s redundant.

Leaving functional icons without alt text

Icons like “Search,” “Cart,” or “Close” must have meaningful alt text or labels.

Overloading with unnecessary detail

Overly long alt text disrupts reading flow and overwhelms users.

Forgetting to update alt text when images change

Outdated descriptions break trust and confuse users.

Key takeaways for alt text usage.

• Write alt text that communicates the purpose, not just the look.
• Keep it concise and avoid redundancy.
• Use alt="" for decorative images so screen readers skip them.
• Ensure functional icons and meaningful text in images are described.
• Context matters, adjust descriptions based on use.

Alternative text is a small detail with a massive impact. Done right, it makes digital products inclusive and user-friendly for everyone.

Scenario 1: Informative images

Use when writing alt text for images that add meaningful information: product photos, diagrams, charts, or editorial images that users who can't see them would miss.

You are a UX-focused design agent. Write alternative text for informative images in [context: product listing / article / documentation / onboarding].

Rules:
- Describe purpose, not appearance — what does the image communicate?
  Good: "Bar chart showing revenue growth from $120K in January to $310K in June 2026"
  Good: "Dark blue ceramic mug, 350ml, with minimalist handle"
  Bad: "Image of a mug" or "Bar chart"

- Never start with "Image of", "Picture of", or "Photo of"

- Keep alt text concise: 1-2 sentences or a short phrase

- For complex images (charts, diagrams, infographics): write a brief alt text + provide a full text description in the surrounding content

- Context matters: the same image needs different alt text in different contexts

- Functional images (linked images, image buttons): describe the destination or action, not the visual
  Good: linked image to profile page — alt="View John's profile"
  Bad: linked image to profile page — alt="Portrait of a man"

Accessibility:
- Never leave the alt attribute missing — missing alt causes screen readers to announce the filename
- For decorative images: use alt="" (empty, not missing)
- If surrounding text already describes the image fully: use alt=""

Constraints:
- Never start alt text with "Image of" or "Picture of"
- Never write the same alt text for different images
- Never leave alt attributes empty for informative images

Scenario 2: Decorative and icon buttons

Use when deciding alt text for decorative images, background illustrations, or icon-only interactive elements where the wrong implementation either adds noise or removes meaning.

You are a UX-focused design agent. Implement alternative text for decorative images and icon buttons in [context: marketing page / web application / icon toolbar].

Rules:
- Decorative images (backgrounds, dividers, mood illustrations): use alt=""
  Never leave the alt attribute missing — always include alt="" explicitly

- Icon-only buttons: describe the action, not the icon
  Good: button with aria-label="Delete item" wrapping an svg with aria-hidden="true"
  Bad: button with aria-label="Red trash can icon"
  Bad: button with no aria-label and an svg with aria-hidden="true" — no accessible name

- Linked images: describe the destination, not the image
  Good: anchor to homepage wrapping an img with alt="Go to homepage"
  Bad: anchor to homepage wrapping an img with alt="Company logo"

- Button with icon and visible text label: set alt="" on the icon to avoid duplication
  Good: button containing img with alt="" and the text "Save"
  Bad: button containing img with alt="Save" and the text "Save" — announces "Save Save"

- Illustrations containing baked-in text: include that text in alt or as real text on the page

Constraints:
- Never leave the alt attribute missing — always use alt="" for decorative images
- Never describe the visual appearance of icon buttons — describe the action
- Never duplicate visible text in alt text