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".

Link to 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". copied to clipboard
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">