Skip to main content

Graphs and charts

Web checkpoint 3

  • Summarize the content of each graph and chart, or use the longdesc attribute to link to the description or data.

On this page:

Rationale

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.

Back to top

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" />
75% cars and 25% trucks


Long description

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" />
75% cars and 25% trucks

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>

75% cars and 25% trucks Description of chart


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>
75% cars and 25% trucks Link to description of chart

Back to top

Testing

Test the Web site to ensure that it complies with accessibility requirements.

Tools


Techniques

The following techniques are required to verify this checkpoint:

Techniques
Action Result
1. Test the Web site with a Web accessibility checking tool to identify:
  • Graphs or charts that are missing alternative text.
  • Graphs or charts that may be missing a descriptive (D) link or LONGDESC element.
 Pass:
  • The Web checking tool does not identify any errors for missing alternative text.
  • The Web checking tool does not identify any errors for missing descriptive links.
Fail:
  • The Web checking tool identifies one or more images missing alternative text.
  • The Web checking tool identifies a user check that must be performed to verify that descriptive links have been provided. If this occurs, perform the following tests to verify the graphs and charts have accessible descriptions.
2. View the page with a graphical browser and look for a text description of the graph or chart. Pass:
  • The description is provided as surrounding text on the same page.
Fail:
  • The description is not provided on the page. Perform the next test to verify that descriptive links are provided using another method.
3. View the page with a screen reader.
  • Listen to the page and verify that alternative text is appropriate for graphs and images.
 Pass:
  • All graphs and charts have appropriate alternative text.
  • All graphs and charts have descriptive links.
Fail:
  • One or more graphs or charts do not have meaningful alternative text.
  • One or more graphs and charts are missing descriptive links.

Back to top

©2001, 2008 IBM Corporation

Last updated January 17, 2008.

Previous

Checklist

Next