W3C home Web Accessibility Initiative (WAI) home

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

[DRAFT] Decorative images

Decorative images are those that do not add information, for example because the information provided by the image is already provided by adjacent text or because the image is purely decorative. In these cases, a null or empty alt text needs to be provided (alt="") so that they can be ignored by assistive technologies such as screen readers. Examples of when images are decorative include:

  • Images used for visual styling such as borders, spacers, and corners;
  • Images that supplement link text to improve its appearance or increase the clickable area;
  • Images that are illustrative of adjacent text but do not contribute information ("eye-candy");
  • Images that are identified and described by sorrounding text.

Note: Where possible decorative images should be part of the CSS styling than the HTML.

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.

Code snippet

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

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 but does not add to the adjacent link text.

Crocus bulbs

Code snippet

<p><a href="crocuspage.html">
<img src="../img/crocus.jpg alt="">

<strong> Crocus bulbs</strong>
</a> </p>

Example 3: Image with adjacent text description

This picture of "Poppy the guide dog" is already identified by the adjacent caption and does not need to be repeated.

Poppy the guide dog

Code snippet

<p><img src="../img/sleeping.png" alt="">
Poppy the guide dog</p>

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

This image is used to add ambience to the page.

Don't miss the impressive Tropical House, which is a huge greenhouse building that displays examples of exotic plant-life from every tropical environment on the planet.

Note: @@@ cross-link to image that conveys impression or emotion in informative images and explain that the purpose needs to be decided by the author.

Code snippet

<img src="../img/kew.jpg" alt="">