Summary
Ensure that decorative images are not presented to users.
Techniques
-
Ensure that decorative images have an empty alt attribute (
alt=""
). [[WCAG-1.1.1]]
Examples
alt
attributeAn empty alt
attribute indicates that the image contains no information for
users.
<img
src="graphics/gothic-border.png"
alt=""/>
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=""/>
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
.