Method: Informative Images

Images used to label other content

This example shows two image icons – one of a telephone, one of a fax machine. A phone number follows each image. The user needs to know the purpose of each number. So, the text alternatives “Telephone” and “Fax” are used to identify the device associated with each number.

0123 456 7890

0123 456 7891

<p>
    <img src="phone.png" alt="Telephone :"> 0123 456 7890
</p>
<p>
    <img src="fax.png" alt="Fax: "> 0123 456 7891
</p>

This example is from the Web Accessibility Tutorials Images.

Images used to supplement other content

The following image shows a dog wearing a bell. The nearby text explains the purpose of the bell, but it does not explain how the dog actually wears the bell. A short text alternative can describe the information that is displayed, but not explained in the text. In this case, the text alternative is “A 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.

Note: If the text included an explanation of how the dog wears a bell, the image might be considered redundant and therefore decorative.

<p>
    <img src="dog.jpg" alt="Dog with a bell attached to its collar.">
    Off-duty guide dogs often wear ...
</p>

This example is from the Web Accessibility Tutorials Images.

Images conveying succinct information

This simple diagram shows how to unscrew a bottle cap. The information can be described in a short sentence: Push the cap down and turn it counter-clockwise.

<img src="cap.png" alt="Push the cap down and turn it counter-clockwise."> 

This example is from the Web Accessibility Tutorials Images.

Images conveying an impression or emotion

This photograph shows a man and woman sitting side by side. The man holds a boy in his lap, and they are all smiling. It’s a stock image. So, the individuals should not be identified. The image indicates that the website or the company it represents is family-friendly. The text alternative is “We’re family-friendly,” because this best describes the intended impression.

<img src="family.png" alt="We’re family-friendly.">

This example is from the Web Accessibility Tutorials Images.

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.

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

Note: 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 remain in the same link element (<a>) as the text, to include it in the clickable area.

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

This example is from the Web Accessibility Tutorials Images.

Graphical representations: charts, diagrams, graphs, maps, illustrations

In the following example, we have an image of a pie chart, with text in the alt attribute representing the data shown in the pie chart. This example is from 4.7.5.1.4. Graphical Representations: Charts, diagrams, graphs, maps, illustrations from HTML 5.3.

<img src="piechart.gif" alt="A pie chart is titled Browser Share. The pie chart shows the percentages of users who prefer different browsers: Firefox 40%, Internet Explorer 25%, Chrome 25%, Safari 6% and Opera 4%.">