Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Decorative Images

Status: This is an in-progress, unapproved draft.

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 for visual interest only.

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 this type of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.

If the alt attribute is not used at all 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 not contributing 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.

Image used as part of page design

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

Example

Code snippet:
<img src="topinfo_bg.png" alt="">

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

Code snippet:
<img src="topinfo_bg.png" role="presentation">

Note: 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.

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 given in adjacent link text.

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

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.

Image with adjacent text alternative

This picture of “Poppy the guide dog” is already identified by the adjacent caption. The caption acts as the text alternative and should not be repeated in the alt attribute.

Example

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

Code snippet:
<p>
	<img src="sleepingdog.jpg" alt="">
	<strong>Let sleeping dogs lie:</strong> ...
</p>

Image used for ambience (eye-candy)

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

Example

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

Code snippet:
<img src="tropical.jpg" alt="">

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

Techniques: