Charts and Graphs

Text browsers and screen readers cannot convey images to their users, so you should provide an alternative to the information that is visually available. This is especially important if you're displaying a useful chart or graph! Provide alternative text using the "ALT" attribute of graphics to summarize charts and graphs.

Use one of the following three methods to provide alternative summary text for detailed information contained in charts and graphs.

Surrounding Description Text

Surround a chart or graph with a detailed description of the information in the image.

For example, this pie chart shows the percentage of male and female Web users in the United States in 2000:

52% of Web users in the U.S. in 2000 were male and 48% were female.

Description Link (D-Link)

Sometimes, the description of the chart or graph is too long to include in the surrounding text. When this happens, use the description link, or D-link, to link to another Web page containing the detailed description of the graph or chart. The current convention is to use the letter "D" as the link text.

For example:

48% female and 52% male Web users.D

The pie chart shows the percentage of male and female Web users in the United States in 2000: 52% of Web users in the U.S. in 2000 were female and 48% were male.

Long Description (LONGDESC)

Use the long description (LONGDESC) attribute of an image to point to a Web page that contains a detailed description of the chart or graph.

We recommend that you use the Description Link (D-Link) since some browsers don't support the long description attribute.

Example LONGDESC code:

<IMG SRC="piechart.gif" title="48% female and 52% male Web users." longdesc="piechartdescription.html">

In this situation, certain browsers (and potentially, future ones) would give the user the option to see the description page so that they can read what the image is about.