Charts and graphs

Provide descriptions of charts and graphs to make them accessible to all readers. If information is too complicated to easily describe, provide contact information for readers who want more information.

Use alt tags on graphic charts

Charts and graphs that are created using graphic files should provide alt tags that describe content. <img src="enrollment.gif" height="100" width="150" alt="Student enrollment has increased 10 percent in the last year.">

D-link [optional]:

One way to describe a chart or graph in more detail is to use a description link, called a "D-link." Rather than spelling out "description link," the convention is to use a single letter "D" near the chart. When selected, the "D" takes the user to another document that describes the chart or graph. <img src="enrollment.gif" height="100" width="150" alt="1999 undergraduate enrollment"> <a href="99enrollment.html">D</a>

In the example above, a sighted person would see the "D" next to the chart, and a screen reader would speak the letter "D."

You can also make the "D" invisible, still placed next to the image, but using an alt text of "D." The invisible "D" might be a transparent gif with "D" as the alt text, or the letter "D" coded to the same color as the web document background. <img src="enrollment.gif" height="100" width="150" alt="1999 undergraduate enrollment"> < a href="99enrollment.html"><img src="transparent.gif" alt="D" height="3" width="3" border="0"></a>

To avoid confusion with multiple D-links, the World Wide Web Consortium suggests using the title attribute to explain specific D-links and how they differ from other D-links on the same page.

"D-links" and alt tags are useful in describing charts and graphs.