alt-text-for-decorative-images
Web validation
alt="") or be marked as presentational.A decorative image adds no information of its own. It might be a divider, a border, a flourish, or a picture whose meaning is already given by nearby text. Screen readers should skip it.
To make that happen, give the image an empty alt attribute (alt=""), or mark it as presentational with role="none". If a decorative image has descriptive alt text, screen readers announce it, adding noise that interrupts reading and navigation.
Pass Patterns
Empty alt text
An empty alt tells assistive technology to skip the image.
<img src="divider.png" alt="" />Empty alt written as a bare attribute
The alt attribute does not need a value in the markup. A bare alt is treated the same as alt="", so the image is still skipped.
<img src="spacer.png" alt />Marked as presentational
A presentation role removes the image from the accessibility tree, with no alt needed. role="none" and role="presentation" are synonyms.
<img src="border.png" role="none" />Fail Patterns
Descriptive alt on a decorative image
The alt text causes a purely decorative image to be announced, adding noise.
<img src="flourish.png" alt="Blue decorative flourish" />Presentation role overridden by aria-label
aria-label is an ARIA attribute, so it overrides the presentation role through presentational roles conflict resolution. The image is exposed and announced even though it is marked as decorative.
<img src="background.png" role="none" aria-label="Abstract background pattern" />WCAG techniques
Sufficient techniques
- H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore
- C9: Using CSS to include decorative images
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
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology
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.
- Navigate through the content that contains decorative images.
- Listen for how images are announced.
Expected results: Decorative images are skipped and not announced.
Actual results: Images with descriptive alt text are announced, even though they add no value.
Inspecting the browser dev-tools
- Open browser dev tools.
- Select the Elements panel.
- Inspect a decorative image.
- Check the accessibility tree.
Expected results: The image is not exposed, or has no accessible name.
Actual results: The image appears with a name derived from its alt text.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 allows non-text content that is pure decoration to be implemented so that assistive technology can ignore it. A decorative image with a non-empty accessible name is instead treated as meaningful content, so it is announced when it should be skipped.
Why is this issue marked as Minor?
This issue does not block access, but it adds noise for assistive technology users. Extra announcements can slow navigation and make content harder to follow, especially on pages with many decorative images.
Why does this check require human review?
Whether an image is decorative or informative depends on why it was placed on the page, which a tool cannot determine. This check surfaces images that look decorative but still carry an accessible name so that a reviewer can confirm the intent and the correct markup.
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-decorative-image, 7.B | There is no accessible name and accessible description for a decorative image. |