image-alt
Web validation
alt text that conveys their purpose or be marked as decorative.Every image requires an alternative text commonly called alt text that gives people who cannot see the image equivalent information. Screen reader users rely on this text to understand the page, and search engines and voice interfaces also use it. Decorative images should be ignored by assistive technology so they do not add noise.
However, alt text must always be written for the situation in which the image appears. Describe only the information the user needs at that point in the journey. The same photo might be “Company founder Jane Doe” on an About page, simply “Jane Doe” beside a captioned quote, or omitted (alt="") if the image is purely decorative in a banner. Match the wording to the image’s role instead of listing every visual detail.
Pass Patterns
An alt text for an “informative” image
The alt text succinctly describes the image’s content.
<img src="chickadee.jpg" alt="A black-capped chickadee perched on a snowy branch with fluffed feathers." />An alt text for a “functional” image
An image that is the only content of a button, with alt text that describes the button's action.
<button type="submit">
<img src="search-icon.png" alt="Search" />
</button>A “decorative” image
Plainly decorative image hidden from assistive technology.
<img src="flourish.svg" role="none" />
<img src="swoosh.svg" alt />
<img src="whirl.svg" alt="" />Fail Patterns
No text alternatives
Meaningful image with no alt attribute.
<img src="chickadee.jpg" />WCAG techniques
Sufficient techniques
- H37: Using alt attributes on img elements
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G95: Providing short text alternatives that provide a brief description of the non-text content
Failure techniques
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move the virtual cursor to the image.
Expected result: The reader announces the alt text or skips a decorative image.
Actual result: If no alt text is present, the reader may announce the file name or nothing meaningful.
Inspecting the browser dev-tools
- Open browser dev tools.
- Select the image element.
- View the Accessibility pane.
Expected result: The element shows an accessible name from the alt attribute or is flagged “ignored”.
Actual result: Missing or empty names indicate a failure unless the image is decorative.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires that all non‑text content has a text alternative serving an equivalent purpose. Images without appropriate alt text fail this requirement.
Why is this issue marked as Critical?
Without alt text, people who rely on assistive technology miss essential information or cannot operate controls. This barrier blocks task completion across browsers and screen readers, so it is classified as critical.
What if the image is purely decorative?
Set alt="". That alone tells assistive technology to ignore the image; adding role="none" or aria-hidden="true" isn't required.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 1.1.1-meaningful-image-name, 7.A | The accessible name and accessible description for a meaningful image provides an equivalent description of the image. |
| 508 Trusted Tester | 1.1.1-decorative-image, 7.B | There is no accessible name and accessible description for a decorative image. |