Decorative Images | Web Accessibility Initiative (WAI) - W3C

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

• Visual styling such as borders, spacers, and corners;
• Supplementary to link text to improve its appearance or increase the clickable area;
• Illustrative of adjacent text but not contributing information (“eye-candy”);
• Identified and described by surrounding text.

The examples below show how to use the alt attribute when decorative images are provided using the <img> element. Where possible, decorative images should be provided using CSS background images instead.

• Example 1: Image used as part of page design
• Example 2: Decorative image as part of a text link
• Example 3: Image with adjacent text alternative
• Example 4: Image used for ambiance (eye-candy)

Example 1: Image used as part of page design

This image is used as a border in the page design and has a purely decorative purpose.

<img src="topinfo_bg.png" alt="">

Screen readers also allow the use of WAI-ARIA to hide elements by using role="presentation". However, currently, this feature is not as widely supported as using a null alt attribute.

<img src="topinfo_bg.png" role="presentation">

If the image was used to indicate a thematic break, e.g. a scene change in a story, or a transition to another topic, using the <hr> element would be appropriate to notify assistive technology.

Example 2: Decorative image as part of a text link

This illustration of a crocus bulb is used to make the link easier to identify and to increase the clickable area but doesn’t add to the information already provided in the adjacent link text (of the same anchor). In this case, use a null (empty) alt value for the image.

Crocus bulbs

<a href="crocuspage.html"> <img src="crocus.jpg" alt=""> <strong> Crocus bulbs</strong> </a>

Example 3: Image with adjacent text alternative

This picture of a sleeping dog is already sufficiently described by the adjacent text. There is no need to repeat this information, and a null (empty) alt value can be used for this image.

The sleeping dog: Let sleeping dogs lie is a proverb that means “don’t initiate trouble. If something that could be troublesome is quiet, then leave it alone”.

<p> <img src="sleepingdog.jpg" alt=""> <strong>The sleeping dog:</strong> ... </p>

Example 4: Image used for ambiance (eye-candy)

This image is used only to add ambiance or visual interest to the page.

Don’t miss the impressive Tropical House – a huge greenhouse that displays examples of exotic plant-life from every tropical environment on the planet.

<img src="tropical.jpg" alt="">

If the purpose of this image was to identify a plant or convey other information, rather than just to improve the look of the page, it should probably be treated as informative. The author determines the purpose for the use of the image.

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:

Techniques:

• H2: Combining adjacent image and text links for the same resource
• H67: Using null alt text and no title attribute on img elements for images that AT should ignore

• Previous: Informative Images
• Next: Functional Images

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list [email protected] or via GitHub.

E-mailFork & Edit on GitHubNew GitHub Issue Back to Top