Summary

Ensure that decorative images are not presented to users.

Techniques

Examples

Example — Empty alt attribute

An empty alt attribute indicates that the image contains no information for users.

<img
    src="graphics/gothic-border.png"
    alt=""/>
Example — Empty alt attribute with ARIA role presentation

An empty alt attribute is complemented by the role presentation to indicate that the image contains no information for users.

<img
    src="graphics/gothic-border.png"
    role="presentation"
    alt=""/>
Example — ARIA role presentation

Authors may use the role presentation in place of an empty alt attribute, but this method is not well supported.

<img
    src="graphics/gothic-border.png"
    role="presentation"/>

Explanation

Not every image in a publication contains information that is important to understanding the text. Decorative flair might be used to highlight the start of a new chapter, but the shape and form of these visuals is irrelevant to understanding the text. Similarly, a textbook might include decorative photographs to start new sections that are only intended to fill out a page visually.

When an image is purely decorative, its alt attribute should be left empty. This signals to assistive technologies not to announce the presence of the image, saving users the nuisance of trying to understand why an image without a description is present.

For additional insurance that decorative images will not be announced, the ARIA role attribute with the property presentation can be attached. This practice is used by some publishers to ensure that an editor has checked all images with empty alt attributes to verify they are decorative.

Note

It is best practice to add an ARIA role if an image is purely decorative, but it is not required for conformance with WCAG.

Although the role none is preferred over presentation as of ARIA 1.1, it is not well supported. The ARIA 1.1 specification recommends using either presentation alone or as a fallback for none.

Related Links