How to Create Accessible Graphics

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Long descriptions for complex images

In some instances, an image is simply too complex to describe in a few words.  alt attributes are meant for relatively short descriptions so they are not a viable option for this situation.  So what do you do?  The simple answer is to provide a link to a longer description of the image.  However, the implementation is not as simple.  The HTML specification provides a way to define this link within the <IMG> tag markup by using the "longdesc" attribute.  The theory is that when a user comes to an image with a "longdesc" they can then choose to access the link and it will take them to a page that contains a description of the link.  The markup for an image would look like this:

<img src="chimpgraph.gif" alt="Graph of Number of Chimps in Asia by Location" longdesc="chimpgraphdesc.htm">

Sounds great. Right?  Unfortunately, browsers and screen readers do not currently support the "longdesc" attribute so it is impractical to use only use this technique. 

The current solution is to provide what is known as a "D" link.  The "D" stands for description and links to a page that contains a description of the image.  Let's look at an example.  We will use the graph that was described earlier. 

D

The image uses normal markup:

<img src="graphics/chimpgraph.gif" width="494" height="253" alt="Graph of Number of Chimps in Asia by Location" longdesc="chimpgraphfdesc.htm">

Next to the image is the "D" link that uses this markup:

<a href="chimpgraphfdesc.htm" title="Description of Asia Chimp Location Graph">D</a>

You may have noticed that a title attribute was added to the link to provide additional information about the link.

The "D" link technique is not written into any guidelines, however it is a practice that has been accepted by the web accessibility community. Another solution would be to put the full word "Description" in a link by the image to accommodate individuals who don't know what a "D" link is for.

A common concern about the "D" link is that it might ruin the design of a page.  Some techniques have evolved such as putting the "D" in the same color as the background or using a transparent gif with a "D" in the alt attribute that links to the description page.  Both of these solutions work well with screen readers, however, you may want to consider that other users may also benefit from the text description of a complex image.  For example, someone with a cognitive impairment who has trouble processing graphical information might find the text description useful.  So the general rule is that finding a way to build the descriptive link into your design is the best solution.  If you can't, then a hidden descriptive link is better then nothing.  For an example of a site using the "D" link, see the Corda Technologies web site (http://www.corda.com/).

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Top of Page || Return to Tutorials List