[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@@@

Code snippet

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.

Code snippet

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).

Code snippet

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.

Code snippet

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:

2012 Annual report and accounts (43KB), also available in (254KB) or (353KB) format.

Code snippet

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.