This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: firstname.lastname@example.org.
[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 included for visual interest only. In these cases, a null (empty) alt text needs to be provided (alt="") so that they can be ignored by assistive technologies such as screen readers. This is because text values used for this type of image would add audible clutter to the screen reader output, or could distract users if the topic is different from that in adjacent text.
If the alt attribute is not included (even though empty) some screen readers will announce the image's file name. Whether to treat an image as decorative or informative is a judgement 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 do not contribute information ("eye-candy");
- Identified and described by surrounding text.
Note: Where possible decorative images should be part of the CSS styling rather than being in 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.
<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 area, but does not add to the information given in adjacent link text.
<img src="../img/crocus.jpg alt="">
<strong> Crocus bulbs</strong>
Note:The null or empty alt value can only be used on linked images if the image and text are part of a single link anchor and the image does not add visual information to the link.
Example 3: Image with adjacent text alternative
This picture of "Poppy the guide dog" is already identified by the adjacent caption, this acts as the text alternative, which does not need to be repeated in the alt attribute.
Let sleeping dogs lie: A proverb meaning don't initiate trouble, if something that could be troublesome is quiet, then leave it alone.
<p><img src="../img/sleeping.png" alt="">
Let sleeping dogs lie: ...</p>
Example 4: Image used for ambience (eye-candy)
This image is used to add ambience or visual interest 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.
<img src="../img/tropical.jpg" alt="">
Note: If the purpose of this image was to identify a plant, or convey other information , rather than only to improve the look of the page, it should probably be treated as informative. The purpose for using the image needs to be determined by the author.