[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 the information being conveyed.
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. Consistently with the visual presentation the text alternatives "Telephone number: " and "Fax number: " 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 number: "> 0123 456 7890
<img src="../img/fax.gif" alt="Fax number: "> 0123 456 7891
Example 2: Image with informative action @@@
The following image shows a dog in the act of relaxing. As adjacent text identifies the breed, and mentions an activity shown in the image, the text alternative "It's not all work ... Poppy the guide dog relaxing on a lawn " is used to explain the activity.
The Labrador-Retriever breed is often intelligent and very trainable. They make good family pets, but are very energetic and need a lot of exercise. They make ideal working dogs and are frequently found working as sniffer dogs, gun dogs or guide dogs. But as the phot shows, it's not all work.
<img src="../img/dog.jpg" alt="It's not all work ... Poppy the guide dog relaxing on a lawn ">
The Labrador-Retriever ...
Note: This technique is the most appropriate where there is any possibility that users may not recognise or understand the information conveyed by the image, in this case, if they didn't know the breed of the dog in the photograph. As the adjacent text provides this information the image can be considered decorative.
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.
@@@ 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: 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).
Note: @@@ cross-link to image that adds ambience in decorative images and explain that the purpose needs to be decided by the author.
<img src="../img/family.png" alt="We're family friendly. ">
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 or empty alt attribute (alt="").
Note 2: This is similar to the icon within linked in Functional images example 3.
Related WCAG2.0 Techniques
The following WCAG 2.0 techniques were used in the examples above: