Long Description

What is a Long Description and why they are important?

Long Descriptions serve the same purpose as an alternative description (i.e. alt text), substituting for non-text content when a short description of that content is insufficient or does not adequately convey the information being supplied, visually.

Did you Know? *
Due to some nuances in the way the JAWS Screen Reader handles Alt Text, *
the character limit for alt text is 125 Characters (excluding spaces)

Think of a complex graph, chart, diagram, or, even, comic strips. While the alt text of a graph might identify the non-text content by, say, referencing the Title of the graph, a long description would be supplied to describe the graph, providing the user with the same information that is depicted, visually.

AudioEye on Long Description

One technique for supplying access to the long description is through the use of the longdesc attribute, which can be used to reference the long description through a separate resource or, inline, within the same page as the non-text element.

Code Example 1:

<img src="global-warming-chart.png" alt="One Thousand Years of CO2 and Global Warming Chart" longdesc="inconvenient-truth.html"/>

Code Example 2:

<img src="global-warming-chart.png" alt="One Thousand Years of CO2 and Global Warming Chart" longdesc="#currentpage.html#longdesc"/>
<div id="longdesc">
<h4>Long Description: One Thousand Years of CO2 and Global Warming Chart</h4>
<!-- Full Description of Graph -->
<p>End of Long description.</p>

NOTE: AudioEye does not advise setting the link to direct the user to another, separate page. If linking to another resource, the content should be supplied through an accessible modal display.

In a 2015 WebAim Screen Reader User Survey, a leading number of survey participants reported a preference for long descriptions provided “as optional text, available on the same page but only if I request it by following a link”.

“The option of placing the alternative on a separate page but having it announced by the screen reader, the most common current behavior of images with the longdesc attribute (and likely the aria-describedat attribute), was a very unpopular option, second only to being ignored entirely.”

The use of Long Descriptions for complex images, charts, graphs, etc. is not enough, though. This is due to the fact that not all assistive technology (AT) devices and browsers recognize or treat Long Descriptions the same. Since browser support for longdesc is not great, AudioEye generally suggests the inclusion of a text link to be provided adjacent to the non-text element, which will supply the user with access in the same manner to that being supplied in conjunction with the longdesc attribute. This link will should take the user to a section of the same page (or an accessible modal), that contains the text of the long description making sure it adequately interprets the intended meaning of the complex image, graph, chart, etc. This approach helps ensure access for all AT users and will work across all AT/browser combinations.

As an important, but related, side note, graphs and charts commonly work best when they are rendered as data tables. Learn more about using data tables to represent non-text elements like complex charts and graphs.

Lastly, and equally important, the approach described, above, is only a sample technique; there are others that techniques that may be employed. Each situation should be evaluated on a case-by-case basis to ensure equitable use for visual and non-visual users.

Some Helpful Resources

University of Minnesota Duluth listing of londesc Tools

University of Minnesota Duluth listing of Text Alternatives and Text Equivalents

W3C – G92: Providing long description for non-text content that serves the same purpose and presents the same information

W3C – H45: Using longdesc