Alt Text:
Match Each Image to Its Purpose

Alt text, short for alternative text, provides an image’s written replacement through the HTML alt attribute; the HTML Standard says this replacement should preserve the meaning of the page.

What alt text does#

The W3C Images Tutorial explains that text alternatives make an image’s information or function available without seeing it, including through speech or Braille from a screen reader. The wording depends on the image’s content, usage, and context.

This is also an accessibility requirement: WCAG 2.2 Success Criterion 1.1.1 generally requires non-text content to have a text alternative serving an equivalent purpose, with specified exceptions. Pure decoration should be implemented so assistive technology can ignore it; controls need names that communicate their purpose.

Choose alt text by the image’s purpose#

Use the image’s contribution to the page to choose its alternative:

Read the nearby heading, prose, caption, and link text before drafting. The W3C tutorial makes context part of the decision, so a description attached to an image file is not automatically suitable everywhere that file appears.

Informative images: include the relevant detail#

For photographs, illustrations, and simple diagrams that contribute information, describe what they add to the surrounding text. The W3C informative-images guide emphasizes conveying meaning; a literal inventory of everything visible is not always needed.

W3C’s dog-and-bell example uses this HTML:

alt="Dog with a bell attached to its collar."

The explanation accompanying that example says the surrounding prose explains the bell’s purpose but does not explain how it is worn. The alternative supplies that missing visual detail. This demonstrates how to select information: describe the contribution that is otherwise absent, rather than restating the paragraph.

Functional images: name the action or destination#

The W3C functional-images guide recommends naming a link’s destination or a button’s action. Its examples use “Print this page” for a print control and “W3C home” for a logo linking to the homepage.

Review the whole control. In W3C’s logo-with-link-text example, visible text within the same link identifies the destination, so the logo uses alt="" to avoid repetition. Keep an alternative for additional information the icon contributes, such as a new-window indication.

Decorative images: use an explicitly empty attribute#

The W3C decorative-images guide defines decoration as adding no information to the page’s content. It includes borders, visual styling, and images whose relevant content is already sufficiently described by nearby text.

Its border-image example uses:

alt=""

An empty attribute deliberately lets assistive technology ignore the image. Omitting alt is a different result: W3C warns that some screen readers will announce the filename instead. Decide whether the image supplies information before marking it decorative; a photograph’s visual appeal alone does not establish its purpose.

Images of text: preserve the words#

When the content is text rendered into an image, the alternative should contain that text, according to W3C’s images-of-text guidance. Describe the message rather than the typography or decorative effects.

W3C recommends real text styled with CSS wherever possible, allowing resizing and color adjustments without image distortion. Logos require attention to their role: W3C’s unlinked WAI logo uses the organization’s name; a linked logo also needs to communicate its destination.

Complex images: provide the information beyond a short label#

The W3C complex-images guide recommends two parts for charts, detailed diagrams, and maps: a brief identification, with a pointer to the longer explanation where appropriate, and a text equivalent of the essential information.

For charts, long descriptions should explain the measurements, figures, comparisons, and patterns needed to understand them. W3C’s chart example includes detailed text and a data table.

Following W3C’s guidance, make the explanation available to everyone in the page content or through a clearly associated link. This also helps people who see the image but need help interpreting it.

How to write concise, useful alt text#

The W3C writing tips recommend concise wording with the most important information first:

• Use a short phrase or sentence; provide longer explanations in page content.
• Usually omit “image of” or “picture of.” Name the medium when it matters.
• Use punctuation for clarity.
• For decoration, leave nothing between the quotes in alt=""; a space can prevent the image from being ignored.

Choose length by the information the alternative needs to communicate. Use the language of the original content, as WCAG’s explanation specifies.

Alt text, captions, and title attributes#

Alt text replaces the image’s contribution. Captions and supplemental titles accompany it. The HTML Standard distinguishes replacement text from captions, titles, and legends, and advises against repeating information already present in adjacent prose.

Assess the caption and alternative together. Keep the visual information that the page still needs, and remove duplication. For ordinary authored HTML images, the standard places replacement text in alt and describes the HTML title attribute as supplemental information.

For SVG, W3C’s guidance uses alt when the file is loaded through img. For inline SVG, it uses an SVG title element referenced by aria-labelledby. That element is different from an HTML title attribute.

How alt text relates to SEO#

Google’s image SEO documentation says Google uses alt text alongside computer vision and page content to understand an image’s subject, and as anchor text for linked images.

Google recommends useful wording that fits the page and uses keywords appropriately. Its published example gives “Dalmatian puppy playing fetch” as a specific alternative to the generic “puppy.” The description identifies the subject and activity.

Avoid adding lists of search terms. Google warns against keyword stuffing because it harms the user experience and may cause a site to be seen as spam. Write the image’s information or function first, and use relevant terms where they naturally describe it.

Check alt text in the finished page#

Review the rendered page as well as the editor’s field. W3C’s draft image-alt checklist checks alternatives against their purpose:

• Informative images convey the information relevant to the page.
• Images of text include their words in the alternative.
• Decorative images have an empty alt attribute.
• Linked images and image buttons identify their destination or action.
• Complex images have a short alternative and their detail explained on the page or through a link.

Recheck alternatives when the image changes. WCAG’s non-text-content guidance lists failing to update alternatives after changes as a common failure. Keep the visual and its text equivalent accurate together.