How-Tos and Demos
Accessible Graphics
Example: Associating a Graph and its Description with the longdesc Attribute
How to do it
Code example for using the longdesc attribute 
Rationale
There are several ways to provide alternative descriptions for graphics that are too complex for the alt attribute alone. In this example, a text description of the chart is provided via the longdesc attribute for people using screen readers. The description is in a separate file. This file is displayed in a new window when the user chooses to hear the description.
Note that the longdesc attribute is used together with the alt attribute: the alt attribute identifies the image (chart) and the longdesc attribute makes the description available. The longdesc attribute contains the filename of the description. By contrast, the alt attribute contains the actual text that is to be spoken by screen readers. Finally, note that in this example the text description of the Great Ape population graph includes a data table with the necessary accessibility features.
How it sounds with the JAWS screen reader
Listen to how JAWS reads the graphic
JAWS transcript
[Graphic. African great ape populations.
Left paren. Press enter for long description right paren.
(note: paren is short for parenthesis)
Enter.
New browser window.
African great apes chart: text description - Microsoft Internet Explorer.
Heading. Description of African great apes chart.
Blank. (blank line)
The chart, “African Great Apes,” is a histogram displaying estimated population sizes for all 9 known subspecies of African Great Apes. All are currently listed by the International Union for Conservation of Nature and Natural Resources left paren IUCN right paren as endangered or critically endangered. The scientific and English common names and population sizes for each species or subspecies are listed below.
Blank.
Table with three columns and ten rows.
Summary: A three-column chart giving the names and population sizes for endangered species of African Great Apes.]