Images must have alternative text

Rule img-alt · Images & non-text content · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Screen readers announce an image by its text alternative. An informative with no alt text is announced as its file name or skipped entirely, so the information it carries is lost. Decorative images should have an empty alt ("") so they are silenced.

How to fix#

Add an alt attribute that conveys the image’s meaning. If the image is purely decorative, use alt="" (or role="presentation") so assistive tech ignores it.

Example#

<img src="chart.png">

<img src="chart.png" alt="Q3 revenue grew 24% over Q2">

For a decorative image use .

Example#

<figure><img src="chart.png"></figure>

<div aria-hidden="true"><img src="chart.png"></div>

An aria-hidden subtree is removed from the accessibility tree, so images inside it (e.g. cloned carousel slides) are not checked.

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Images Tutorial