1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.01.09 Text equivalents: Graphs & diagrams

Alternative text for graphs

Complex images such as graphs, diagrams or illustrations, may convey a lot of information visually. It may be difficult to succinctly state all of that information in an alt attribute.

The simple solution is to describe all the information in the content text and then use a short alt text.

Another solution is to have a separate HTML page which contains a full description of the image. This may be linked to by an longdesc attribute:

<img src="graph1.gif" width="300" height="300" longdesc="graph1.html" alt="graph 1" />

Browser support is sketchy for this attribute and the W3C suggest the use of a d-link instead.
A d-link is a standard text link using the letter "D" next to the image:

<img src="graph2.gif" width="300" height="300" alt="graph 2" />
<a href="graph2.html">D</a>

Graph example 1

Graph depicting the increase in internet usage between 1990 and 2005

What would make good body text to go alongside the graph?

Graph example 2

Graph depicting a small amount of Titanium alloy mixed into a large amount of Rhobundium

What would make good body text to go alongside the graph?