Creating Accessible Images
Long Descriptions
Article Contents
- Page 1: Images Introduction
- Page 2: Images that Enhance Comprehension
- Page 3: Color and Contrast
- Page 4: Text Within Graphics
- Page 5: Graphics That Cause Seizures
- Page 6: Creating Effective Alternative (
alt) Text - Current page: Page 7: Long Descriptions
When to Provide Long Descriptions
Complex images, such as charts and graphs, may be too complex to describe in a brief alternative text. Alternative text is meant to be relatively short, so it would be an abuse to write more than a few words, or, at most, a few short sentences. The answer, then, is to provide a brief description of the image in the alt attribute 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:
- Provide the long description in the context of the document itself.
- Provide a link to a long description via a normal text link.
- Provide a link to a long description via the
longdescattribute.
In the context of the document itself
By putting the long description within 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. Additionally, the description is searchable (by both humans and search engines) within one web page. Here is an example of how that could be accomplished with a complex graph:
The percentages of total U.S. non-institutionalized population age 16-64 declaring one or more disabilities are:
- Total declaring one or more disabilities: 18.6%
- Sensory (visual and hearing): 2.3%
- Physical: 6.2%
- Mental: 3.8%
- Self-care: 1.8%
- Difficulty going outside the home: 6.4%
- Employment disability: 11.9%
A standard text link
The second-best way to provide a long description is to simply link to a long description page, as in the example below:
Alternatively, the image itself could be placed within the link. This information is available to everybody, even though they have to activate the link to access it.
In the days before the longdesc attribute was supported by screen readers, some people advocated using "d" links. These "d" links ("d" standing for description) are regular links to the description page page, with the text of the link being the letter "d" placed immediately after the complex image. Because of improved longdesc support and because some people are confused by the purpose of the one-letter link, the use of "d" links is not a recommended method for providing access to an image's long description page.
The longdesc attribute
The longdesc attribute, which can be added to an <img> tag, provides access to the separate page where a long description is available. The longdesc value must be the URL of the long description page. It should NOT contain the long description text itself. The following example is the same graph with a longdesc attribute added:
The longdesc approach is a technique recommended in both the Web Content Accessibility Guidelines and the Section 508 guidelines. However, while modern screen readers provide good support for longdesc, browsers do not currently provide any visual indication that the image references a long description page. Many browsers do provide this information in the image details or context menu, but this is not readily apparent. For these reasons, longdesc has been dropped from the HTML5 specification. Because the long description page is useful to all users, if longdesc is used, it should be used in conjunction with a standard link to the long description page (method #2 above).
Here is the markup for the longdesc attribute:
<img src="graph.jpg" width="526" height="353" alt="Graph of percentage of total U.S. non-institutionalized population age 16-64 declaring one or more disabilities" longdesc="media/description.htm">
WebAIM is an initiative of:
