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