The use of a text alternative with decorative images is not appropriate. The decorative <img> is missing an empty alt attribute (alt="") or role="presentation".
- Rule ID:
- alt-text-decorative-inappropriate
- User Impact:
- Moderate
- WCAG :
- 1.1.1.d
Rule
Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text MUST be given null alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds.
Background
Decorative images do not add information to the content of a page. Examples of decorative images include an image whose content is provided by adjacent text, or an image that is used just for visual effect such as a hero image, a background image, a stock photo, or a decorative flourish. Decorative images should be coded in such a way that screen readers can ignore them.
To tell screen readers to ignore a decorative image, give it a null alt attribute (alt=""), use role="presentation," or use a CSS background.
Code Examples
Good examples:
Decorative image has empty alt text:
<a href="contact.html">
<img src="phone.png" alt="">
<span>Contact Us</span>
</a>
Decorative image has role="presentation":
<a href="contact.html">
<img src="phone.png" role="presentation">
<span>Contact Us</span>
</a>
Decorative image is implemented as a CSS background:
In the CSS:
.login {
background:url(login.png) no-repeat top left;
padding-left:24px;
}
In the HTML:
<button class="login">Login</button>
Failure examples:
Decorative image has non-empty alt text:
<img src="spacer.png" alt="spacer.html">
<img src="background.png" alt="The background of the site is blue waves">