[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

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

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

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