Skip to content
UX Atlas
Plate A11Y·007 · AccessibilityGrid A4 · Rev. 2026-09-14

Alt Text

The text equivalent of an image, which depends on the image's purpose in that specific context.

AccessibilityCraft conventionFoundational

Definition

Alt text conveys the function of an image to people who cannot see it. WCAG 1.1.1 requires a text alternative for non-text content. The correct alt text for the same image differs by context.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Alt text by image role
  3. 3Writing guidance
  4. 4Deciding what to write
  5. 5Writing it
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Every image.
  • Building a content management interface, which should prompt for alt text.

Common mistakes

  • Missing alt attributes.
  • Filenames used as alt text.
  • Duplicating an adjacent caption.
  • Describing appearance where function is what matters.

Alt text by image role

RoleAlt text
DecorativeEmpty: alt="". Never omit the attribute, which causes the filename to be read.
InformativeDescribe the information the image conveys, not its appearance.
Functional, such as an icon buttonDescribe the action, not the picture. 'Search', not 'magnifying glass'.
Image of textThe text itself, verbatim. Better still, use real text.
Complex, such as a chartA short alt plus a longer description or data table nearby.
Adjacent to a captionDo not repeat the caption. Say what the caption does not.

Writing guidance

  • Aim for one sentence. Long alt text cannot be paused or re-read easily.
  • Do not start with 'image of' or 'picture of'. The screen reader already says so.
  • Include text that appears within the image.
  • For product photography, describe what a buyer needs to know, such as colour, material and view.
  • For people, describe what is relevant to the context rather than cataloguing appearance.

Deciding what to write

Four questions, in order. Most images are answered by the first two.

  1. 1

    Does it do anything?

    If it is a link or a button, describe the destination or the action, not the picture.

  2. 2

    Does the surrounding text already say it?

    If the caption or the adjacent paragraph carries the information, the image is decorative here. Empty alt, attribute present.

  3. 3

    What would be lost if it did not load?

    Write that, in one sentence. This is the whole method, and it produces better alt text than any rule about length.

  4. 4

    Is it too complex for a sentence?

    Charts, diagrams and maps need a short alt plus a real description or data table nearby, which benefits everyone reading on a small screen too.

Writing it

Do

  • Write for the purpose the image serves on this page, since the same photo needs different alt text in a catalogue and in a news story.
  • Include any text that appears inside the image.
  • Keep decorative images out of the way with alt="", so they are skipped rather than described.
  • Describe charts in terms of what they show: the trend, the outlier, the comparison.

Do not

  • Do not omit the alt attribute, which makes the screen reader read the filename.
  • Do not start with image of or photo of.
  • Do not stuff keywords into alt text. It is a name, not a marketing surface.
  • Do not repeat the caption word for word, which means hearing the same sentence twice.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Accessible Names

Accessibility

The string assistive technology announces for a control or region, whatever its source.

Key difference

Alt text is one way an accessible name gets computed, and it only applies to images. Buttons, inputs, links and regions all need names too, computed from labels, content or ARIA.

Use Alt Text when

  • The element is an image, icon graphic or chart.
  • You are deciding between describing it and hiding it.
  • The question is what the picture is for, not what it is of.

Use Accessible Names when

  • The element is a button, input, link, dialog or landmark.
  • An icon-only control announces nothing useful.
  • You are debugging what a screen reader actually says.

Learn about Accessible Names

Local chart

A11Y·007 · Region V · Grid A4

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ChartCMP·028 · RELIED ON BYLoomTOOL·048 · OFTEN USED WITHAccessible NamesA11Y·008 · COMMONLY CONFUSED WITHAlt TextTERM·080 · SHORT DEFINITIONScreen ReaderTERM·076 · SHORT DEFINITIONScreen ReadersA11Y·005 · RELATED CONCEPTIconographyFND·050 · RELATED CONCEPTImageryFND·051 · RELATED CONCEPTContent DesignWRT·004 · RELATED CONCEPTSEO for Content ProductsWRT·007 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    An alt Decision Tree

    W3C Web Accessibility Initiative

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardAn Ecommerce Experience

Relied on by

Entries that assume this is already in place.

  • ChartCMP·028 · Component

Often used with

These usually appear in the same screen or the same decision.

  • LoomTOOL·048 · Tool

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.