Skip to content
UX Atlas
AccessibilityCraft conventionFoundational

Alt Text

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

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 page
  1. Definition
  2. Alt text by image role
  3. Writing guidance
  4. Sources
  5. Continue from here

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.

Sources

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

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.

Often used with

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

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Accessible NamesAccessibility

    Alt text is one way a name gets computed. Buttons, inputs and regions need names too.

Short definition

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

Related concept

Connected closely enough to change how you apply this.