Skip to Content
Component ExamplesImages & Alt Text

Images & Alt Text

Informative, decorative, and complex images — the foundation of non-text content accessibility

Maintained by Martin KrugerLast reviewed

Overview

Images are one of the most fundamental forms of non-text content on the web. For sighted users, images convey information instantly. For screen reader users, the alt attribute is the only way to understand what an image represents. Missing alt text causes screen readers to read the filename, while incorrect alt text on decorative images creates unnecessary noise.

WCAG Criteria:

Key requirements:

  • Every <img> must have an alt attribute — omitting it entirely causes screen readers to read the filename
  • Informative images need descriptive alt text that conveys the same information as the image
  • Decorative images must use alt="" (empty) so screen readers skip them entirely
  • Functional images (inside links or buttons) describe the purpose, not the appearance
  • Complex images use aria-describedby to point to a longer visible description

Informative Image

Informative Image with Alt Text

Inaccessible

A dog playing in the park.

View inaccessible code
<!-- No alt attribute at all — screen reader reads filename -->
<img src="dog-park.jpg" />
<p>A dog playing in the park.</p>
Accessible
A golden retriever catching a frisbee in a park

A dog playing in the park.

View accessible code
<!-- Descriptive alt conveys the image content -->
<img src="dog-park.jpg" alt="A golden retriever catching a frisbee in a park" />
<p>A dog playing in the park.</p>

What’s wrong without an alt attribute?

  • The screen reader reads the image filename (e.g. “dog-park.jpg, image”) — meaningless noise
  • This is different from alt="" — a missing alt attribute is never correct
  • Users have no way to know what the image depicts

Predicted semantic summary (exact output varies):

VersionAnnouncement
Inaccessible (no alt)“dog-park.jpg, image” (reads the filename)
Accessible (alt text)“A golden retriever catching a frisbee in a park, image”

Decorative Image

Decorative Image Handling

Inaccessible

Section Title

decorative border

Content below the decorative divider.

View inaccessible code
<!-- alt="decorative border" adds noise — screen reader reads it aloud -->
<h3>Section Title</h3>
<img src="divider.png" alt="decorative border" />
<p>Content below the decorative divider.</p>
Accessible

Section Title

Content below the decorative divider.

View accessible code
<!-- alt="" tells screen readers to skip this image entirely -->
<h3>Section Title</h3>
<img src="divider.png" alt="" />
<p>Content below the decorative divider.</p>

What’s wrong with alt text on decorative images?

  • Screen readers announce “decorative border, image” — this adds no useful information
  • Decorative images exist purely for visual styling and carry no meaning
  • Using alt="" (empty string) explicitly marks the image as decorative — the screen reader skips it completely
  • This is different from omitting alt entirely, which causes the filename to be read

Predicted semantic summary (exact output varies):

VersionAnnouncement
Inaccessible (alt="decorative border")“decorative border, image” (unnecessary noise)
Accessible (alt="")(nothing — image is skipped entirely)

Functional Image

Functional Image Inside a Link

Inaccessible
View inaccessible code
<!-- Image inside a link with no alt — user hears just "link" -->
<a href="/search">
  <img src="search-icon.svg" />
</a>
Accessible
View accessible code
<!-- alt describes the action, not the appearance -->
<a href="/search">
  <img src="search-icon.svg" alt="Search" />
</a>

What’s wrong without alt text on functional images?

  • The link has no accessible name — the screen reader announces just “link” with no indication of where it goes
  • Users cannot determine the purpose of the link without seeing the icon
  • For functional images, the alt text should describe the purpose (e.g. “Search”), not the appearance (e.g. “magnifying glass icon”)

Predicted semantic summary (exact output varies):

VersionAnnouncement
Inaccessible (no alt)“link” (no purpose conveyed)
Accessible (alt="Search")“Search, link”

Beyond simple images

  • Complex charts and diagrams: provide a concise alt that identifies the image and its purpose, plus an adjacent or linked long description containing the data, relationships, and conclusion needed for the task. A data table may be the clearest equivalent for a chart.
  • Images of text: use real text whenever the same visual presentation can be achieved. Logos and essential presentations have limited exceptions under WCAG 1.4.5.
  • CAPTCHAs: describe the non-text content’s purpose and provide alternatives for different sensory modalities. An audio transcription alone may create another perception or cognitive barrier; prefer verification that does not depend on solving a sensory puzzle.
  • Testing: verify the computed name and the usefulness of the alternative in context. Exact spoken phrasing varies by screen reader and browser.

Resources

Mega MenusIcons