Creating Accessible Images
Long Descriptions

Article Contents

  1. Page 1: Images Introduction
  2. Page 2: Images that Enhance Comprehension
  3. Page 3: Color and Contrast
  4. Page 4: Text Within Graphics
  5. Page 5: Graphics That Cause Seizures
  6. Page 6: Creating Effective Alternative (alt) Text
  7. Page 7: Long Descriptions
    1. When to Provide Long Descriptions
    2. Methods of Providing a Long Description
      1. In the context of the document itself
      2. A normal text link
      3. The longdesc attribute
      4. "D" links

When to Provide Long Descriptions

In some instances, an image is too complex to describe in a few words. Charts and graphs are primary examples of such images. Although there does not appear to be any limit to the length of text in an alt attribute, alt text is meant to be relatively short, so it would be an abuse of this attribute to write more than a few words, or, at most, a few short sentences. The answer, then, is to provide a brief alt text description of the image and then provide a longer description elsewhere.

Methods of Providing a Long Description

There are several ways of providing a long description for images. These options are listed below, in order of most preferred to least preferred:

  1. Provide the long description in the context of the document itself
  2. Provide a link to a long description via a normal text link
  3. Provide a link to a long description via the longdesc attribute
  4. Provide a link to a long description via a "d" link

Those who are familiar with accessibility techniques may be surprised to find that the longdesc attribute and "d" link are at the bottom of the list. The reason for this is that both methods are rather obscure. The longdesc attribute is invisible (and inaccessible in some browsers) to people who are not using screen readers. The "d" link is unconventional, and can be confusing to people who are not familiar with their purpose. The most straightforward way of making long descriptions accessible is to make them obvious and available to everyone, whether they have a disability or not.

In the context of the document itself

By putting the long description right in the context of the document where the graphic occurs, you are serving everybody, not just those with disabilities. Everyone will be able to read the long description and benefit from it. Here is an example of how that could be accomplished with an image of a graph:

Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities

The above bar graph shows the percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities. The percentage value for each category is as follows:

  • Total declaring one or more disabilities: 18.6 percent
  • Sensory (visual and hearing): 2.3 percent
  • Physical: 6.2 percent
  • Mental: 3.8 percent
  • Self-care: 1.8 percent
  • Difficulty going outside the home: 6.4 percent
  • Employment disability: 11.9 percent

data retrieved from 2000 U.S. Census - external link

In the above example, the data appears after the image, and is accessible to all.

The longdesc attribute

The longdesc attribute, which can be added to an <img> tag, does nothing more than provide a link to a separate page where a long description is available. It works in the same way as the previous example, except that the link is invisible to sighted readers. The following example is the same graph with a longdesc attribute added:

Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities

Those who are sighted realize that there is nothing to see about a longdesc attribute. As far as they are concerned, it isn't there. The only people who can access the longdesc attribute easily are those using modern screen readers. Older screen readers did not support this attribute. Even among those who use the latest version of screen reader, there are many who are unfamiliar with the longdesc attribute (because it is used so infrequently), and do not know how to access it even though their screen reader supports it.

The bottom line is that the longdesc tag benefits only a small audience, despite the fact that it is a technique recommended in both the WAI guidelines and the Section 508 guidelines.

Here is the markup for the longdesc attribute:

<img src="graph.jpg" width="526" height="353" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="media/description.htm">

"D" Links

In the days before the longdesc tag was supported by screen readers, a group of people decided that they needed an equivalent method that was supported, so they invented the "d" link. The letter "d" stands for "description." These "d" links are nothing more than regular links to another page, with the text of the link being the letter "d." Here is how a "d" link would look in our example:

Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities
D

You can use an upper case D or a lower case d. It really doesn't matter. The "d" link is normally placed right after the image. This technique works in all browsers, and it does accomplish the purpose of providing access to the long description, but it is less elegant than the other methods. Some people will be confused by the one-letter link. Others will simply ignore it. You can use this method, but only if you have a good reason for rejecting the others.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University