Informative Images

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:

Phone: 0123 456 7890

Fax: 0123 456 7891

Code snippet:
<p>
	<img src="phone.png" alt="Phone:"> 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 is displayed 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 “Push the cap down and turn it counter-clockwise (from right to left)” is given in the alt attribute.

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

Note 1: An alternative technique would be to provide the instructions within the main content rather than as a text alternative to the image. This makes all information available in text for everyone, while providing an illustration for people who prefer to view the information visually.

Note 2: If more information than that of the diagram is intended to be conveyed by the image, for example if the fact that this diagram appears on the bottle or if the shape and size of the bottle were relevant pieces of information, then it may be better to follow 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=""). It could still remain in the same link element (<a>) as the text, to include it in the clickable area. Further discussion is provided in “Functional Images: Logo image within link text”.

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