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

Informative Images

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

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or identification that is displayed visually which typically isn’t a literal description of the image.

In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information. Whether to treat an image as informative or decorative is a judgement that authors make, based on the reason for including the image on the page.

Images used to label other information

This example shows two image icons – one of a telephone, one of a fax machine. Each image is followed by a phone number. Consistent with the visual presentation the text alternatives “Telephone:” and “Fax:” are used to identify which number is which.

Example

Telephone: 0123 456 7890

Fax: 0123 456 7891

Code snippet:
<p>
	<img src="phone.png" alt="Telephone:"> 0123 456 7890
</p>
<p>
	<img src="fax.png" alt="Fax:"> 0123 456 7891
</p>

Images used to supplement other information

The following image shows a dog wearing a bell. It supplements the adjacent text that explains the purpose of this bell. A short text alternative is sufficient to describe the information that displays visually but is not explained in the text; in this case the text alternative is “Dog with a bell attached to its collar.”.

Example

Dog with a bell attached to its collar. Off-duty guide dogs often wear a bell. Its ring helps the blind owner keep track of the dog’s location

Code snippet:
<p>
	<img src="dog.jpg" alt="Dog with a bell attached to its collar.">
	Off-duty guide dogs often wear ...
</p>

Note: If the text included an explanation of how the dog wears a bell, the image might be considered redundant and therefore decorative. As this isn’t mentioned in the text, the image is deemed to be informative.

Images conveying succinct information

This simple diagram illustrates a counter-clockwise direction for unscrewing a bottle top or cap. The information can be described in a short sentence, so the text alternative “Counter-clockwise diagram: Push the cap down and turn it from right to left” is given in the alt attribute.

Example
Counter-clockwise diagram: Push the cap down and turn it from right to left.
Code snippet:
<img src="cap.png" alt="Anti-clockwise diagram: Push the cap down and turn it from right to left.">

Note 1: An alternative technique would be to include all of the information in the visible text, using the image as a redundant (decorative) effect, in which case the visual text could be “Turn counter-clockwise (right to left) to unscrew the cap”. This makes all information available in text, while providing additional visual clues for people who find text more difficult to understand.

Note 2: If the information conveyed by the image is substantial, use one of the approaches described in Complex images.

Images conveying an impression or emotion

This photograph shows a smiling family group. It’s a stock image so the individuals should not be identified. It’s being used to give the impression that the website or the company it represents is family-friendly. The text alternative is “We’re family-friendly” as this best describes the intended impression.

Example

We’re family-friendly.

Code snippet:
<img src="family.jpg" alt="We’re family-friendly. ">

Note: If the purpose of this image were simply to improve the look of a page rather than convey an impression, it could be deemed to be decorative, as shown in “Decorative Images: Image used for ambience”. The author determines the purpose for using the image.

Images conveying file format

In this example, a document is available to download in three different formats identified by format icons within text links. They have the text alternatives “HTML”, “Word document”, and “PDF” to distinguish the file type for each link:

Example
Code snippet:
<p>
	<a href="…">
		2012 Annual report and accounts
		<img src="html5logo.png" alt="HTML" > (43KB)
	</a>, also available in
	<a href="…">
		<img src="worddocument.png" alt="Word document"> (254KB)
	</a>
	or
	<a href="…">
		<img src="pdfdocument.png" alt="PDF"> (353KB)
	</a>
	format.
</p>

Note 1: If the format identification were written as part of the link text, the image might be considered decorative and have a null (empty) alt attribute (alt="") but could be in the same link element (<a>) as the text to include it into the clickable area that is expected. See “Functional Images: Logo image within link text” for details.

Note 2: This particular example is similar to the icon within linked text in Functional Images in that the image conveys information that isn’t given in the link text.

Techniques: