On this page:
A chart or graph is essentially an image with detailed information. Some charts or graphs have more information and data in them than others. Text browsers and screen readers cannot convey images to their users, so an equivalent alternative to the essential information that is visually available from the chart or graph must be provided. The amount of alternative information to provide depends on the contextual use of the chart or graph, but generally it should include all the information available to the sighted user.
All charts and graphs should have alternative text as described in Checkpoint 1. A summary of the content is usually appropriate for the alt attribute of the image. The additional detail data from the chart or graph is not intended to be included in the alt attribute. Instead, use one of the following three techniques: surrounding text, and the long description. When to use each technique depends on the contextual use of the chart or graph, the importance of the data, visual design considerations, and support in the browsers.
The National Braille Association (NBA) has published a Tape Recording Manual which gives instructions to readers on how to describe complex pictures when recording material for use by blind individuals. The World Wide Web Consortium has made available an excerpt from the NBA Tape Recording Manual to assist Web authors who are trying to describe complex images on their Web sites. It can also be used to describe complex images in documentation.
One of the following techniques is the minimum required to meet Checkpoint 3 from the IBM web accessibility checklist.
All three techniques are illustrated with the same pie chart used in different contextual situations to distinguish among the techniques.
Surrounding description text
Include a description of the information in the graph or chart as text surrounding the image. For example:
This pie chart shows the percentage of cars and trucks passing through a toll booth in one hour:
75% of the vehicles were cars; 25% of the vehicles were trucks.
<img src="piechart.gif" alt="75% cars and 25% trucks."width="154" height="142" />
This technique is used when it is not desirable to include all the detail about data from the graph in the surrounding text.
Use the >longdesc attribute to point to a URL that contains a detailed description and data. For example, because the information about the colors of the pie chart is only available from the visual image, a separate description is provided that includes the information about the colors of the pie chart. A blind math student, or a student using a text-only browser, would be able to answer the question using the separate description. Caution: HPR supports the longdesc attribute, but not all browsers do at this point.
Math student: From the chart determine which vehicle type is represented by the smaller blue wedge:
<img src="piechart.gif" longdesc="piechart_desc.html" alt="75% cars and 25% trucks." width="154" height="142" />
The longdesc points to the separate description file that includes the following sample HTML:
<p>Pie Chart Description</p>
<p>This pie chart shows the percentage of cars and trucks out of the total vehicles passing through a toll booth in one hour. Cars are represented by the larger red wedge and trucks are represented by the smaller blue wedge. 75% of the vehicles were cars; 25% of the vehicles were trucks. The total number of cars and trucks is not displayed on the pie chart.</p>
Link to the description
This technique is used when it is not desirable to include all the detail about the graph or chart in the surrounding text. Use a conventional link or an invisible image link to access a URL containing the detailed description of the graph or chart.
In the following examples, information about the size and shape of the wedges that make up the pie chart are only available from the visual image. A detailed description needs to be included so a blind math student (or a student using a text-only browser) will understand the visual concept and be better able to answer the question.
This example uses a conventional link.
<img src="piechart.gif" alt="75% cars and 25% trucks." />
width="154" height="142" <a href="piechart_desc.html">Description of chart</a>
This example uses an invisible image which does not change the visible appearance of the page at all yet will be read by a screen reader.
<img src="piechart.gif" alt="75% cars and 25% trucks." width="154" height="142" />
<a href="piechart_desc.html"><img src="images/c.gif" alt="Link to description of chart" width="1" height="1" border="0" /></a>
Test the Web site to ensure that it complies with accessibility requirements.
The following techniques are required to verify this checkpoint:
|1. Test the Web site with a Web accessibility checking tool to identify:||
|2. View the page with a graphical browser and look for a text description of the graph or chart.||
|3. View the page with a screen reader.||
©2001, 2008 IBM Corporation
Last updated January 17, 2008.