This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: firstname.lastname@example.org.
[DRAFT] Informative images
Informative images are those that convey a simple concept or information that can be expressed in a short phrase or sentence. In this case, the text alternative needs to convey the meaning or identification that is visually apparent, which isn't normally a literal description of the image. In some situations a detailed literal description may be needed, but only where the composition of the image is all or part of the information being conveyed. Whether to treat an image as informative or decorative is a judgement that only the author can make, based on the reason for including the image on the page.
Example 1: Image used for identification
This example shows two images, 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.
0123 456 7890
@@@icon of a phone needed@@@
0123 456 7891
@@@icon of a fax needed@@@
<img src="../img/phone.gif" alt="Telephone: "> 0123 456 7890
<img src="../img/fax.gif" alt="Fax: "> 0123 456 7891
Example 2: Image with informative action
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 visually evident but not explained in the text; in this case the text alternative is "Dog with a bell attached to its collar.".
Off-duty guide dogs often wear a bell , it's ring helps the blind owner keep track of the dog's location
<img src="../img/dog.png" alt="Dog with a bell attached to its collar.">
Off-duty guide dogs often wear ...
Note: If the text included an explanation of how the dog wears a bell, the image might be considered decorative. As this isn't mentioned in the text, the image is deemed to be informative.
Example 3: Image conveying succinct information
This simple diagram illustrates an anti-clockwise direction for unscrewing a bottle top or cap. The information can be described in a short sentence, so the text alternative "Anti-clockwise diagram: Turn the cap from right to left" is given in the alt attribute.
Turn counter-clockwise to unscrew the cap.
@@@ image needed (bottle top or cap with anti-clockwise arrow).
... <img src="../img/cap.png" alt="Anti-clockwise diagram: Turn the cap 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.
Not 2e: If the information conveyed by the image is substantial, use one of the approaches described in Complex images.
Example 4: Image conveying an impression or emotion
This photograph shows a smiling family group, it is a stock image so the individuals don't need to be identified. It is 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.
@@@ image needed (smiling family group).
<img src="../img/family.png" alt="We're family friendly. ">
Note: If the purpose of this image was simply to improve the look of a page rather than convey an impression, it could be deemed to be decorative, as shown in example 4 of Decorative images. The purpose for using the image needs to be determined by the author.
Example 5: Image 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:
<a href="...">2012 Annual report and accounts <img src="HTML5_Logo_16.png" alt=" HTML" > (43KB)</a>
... <img src="../img/word.png" alt="Word document">
<img src="../img/pdficon_small.png" alt="PDF">
Note 1: If the format identification were written as part of the link text, the image may be considered decorative and have a null (empty alt attribute (alt="") but must be in the same link anchor as the text, as in functional images, example 2.
Note 2: This particular example is similar to the icon within linked in Functional images example 3 in that the image conveys information that isn't given in the link text.
Related WCAG2.0 Techniques
The following WCAG 2.0 techniques were used in the examples above: