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:

• 1.1.1 Non-text Content  — all non-text content must have a text alternative that serves the equivalent purpose

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

<!-- No alt attribute at all — screen reader reads filename -->
<img src="dog-park.jpg" />
<p>A dog playing in the park.</p>

Live Preview

A dog playing in the park.

Try with Screen Reader

Accessible

<!-- 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>

Live Preview

A dog playing in the park.

Try with Screen Reader

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

What the screen reader announces:

Decorative Image

Decorative Image Handling

Inaccessible

<!-- 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>

Live Preview

Section Title

Content below the decorative divider.

Try with Screen Reader

Accessible

<!-- 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>

Live Preview

Section Title

Content below the decorative divider.

Try with Screen Reader

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

What the screen reader announces:

Functional Image

Functional Image Inside a Link

Inaccessible

<!-- Image inside a link with no alt — user hears just "link" -->
<a href="/search">
  <img src="search-icon.svg" />
</a>

Live Preview

Try with Screen Reader

Accessible

<!-- alt describes the action, not the appearance -->
<a href="/search">
  <img src="search-icon.svg" alt="Search" />
</a>

Live Preview

Try with Screen Reader

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”)

What the screen reader announces:

Resources

• WAI — Images Tutorial 
• MDN — <img> element
• WCAG 1.1.1 — Non-text Content