Information Technology Systems and Services.
ITSS home

How to Write Long Text Alternatives

As Joe Clark wrote in his classic book Building Accessible Websites:

It would not be remiss to hope that a long description conjures an image - the image - in the mind's eye, an analogy that holds true even for the totally blind.

To write a long text description ask yourself, if there is no description, what will the user miss?

Long Text Alternatives Good Practices

For further details consult Joe Clark's advice and the National Center for Accessible Media's Effective Practices for Description of Science Content within Digital Talking Books.

Using the longdesc attribute

A way to provide a semantic and programmatically determinable long text alternative for images such as data visualizations (i.e. charts and graphs), diagrams, cartoons, logos, drawings, illustrations, maps, photographs, etcetera is via the longdesc attribute.

Like the alt attribute, longdesc is not typically displayed by default in desktop browsers. Modern screen readers take advantage of the programmatic determinability of longdesc. It is announced by screen readers and is read upon request so that users are provided a choice of listening to it (or not). In JAWS 11 the keyboard shortcut is alt + enter. One can also use the list of graphics contained in the document in order to retrieve longdescs by using the "Graphics List" to move focus to an individual graphic, the longdesc of which can then be accessed by pressing the "enter" key.

Longdesc is not only an accommodation mechanism for people who are blind or have a visual impairment and use a screen reader, it also can assist sighted people who need or would like textual reinforcement when deciphering the contents of a complicated image via an excellent collection of tools. These tools can also be invaluable when writing and checking long descriptions. In addition many authoring tools support longdesc.

The W3C HTML5 Image Description Specification defines the longdesc attribute to link extended descriptions with images in HTML5-based content. In addition the longdesc attribute can be used in XHTML and HTML4.

Karen Sorensen demos an example of how a screen reader reads longdesc in the following video.

longdesc Syntax (Separate description page)

Longdesc is a special kind of a link that may go to a description located in a separate description page. The syntax is:

  <img
  longdesc="graph-LD.html"
  alt="Line graph of the number of subscribers"
  src="graph.png">

Then you have to make a separate page for the description. In the case above a separate page, graph-LD.html, is where you would describe the graph taking into account good practices.

longdesc Syntax (On-page description)

By using a fragment identifier, longdesc may also be used to link to a description within the same document. The syntax is:

  <img
  longdesc="samepage.html#desc"
  alt="Line graph of the number of subscribers"
  src="http://www.company/images/graph.png">
  <div id="desc">
  <!-- Full Description of Graph -->
  <div>

If the long text alternative of an image is useful to all users, keeping it in plain view in the same document and using longdesc for screen reader users to programmatically obtain it is a good option. That way everyone can read it.

The Example Long Description Markup page provides examples of using longdesc as well as other methods. By using long text alternatives you provide programmatically determinable long descriptions.

A normal link below or near an image may be used to provide a long description within the document itself or to link to a separate page. This is a simple method as everyone will have access to the description. However, it is not semantic as the link is a generic link and it is not programmatically determinable. Screen reader users will not be alerted that a long description exits and could very well miss it. Example markup using a normal link for an off-page description and a live example are available.

Note: Some authors have strict aesthetic constraints and a normal link does force a visual encumbrance upon sighted users unless additional code in the form of a certain type of accessible CSS is added in order to hide the visual indicator.

Future Methods

Accessiblity groups at the W3C are investigating using the <details> and <summary> elements for long descriptions. These elements can be used to create a disclosure widget for showing and hiding content. However, this method is not curently well supported by browsers. In addition this method is not semantic. The semantics of <details> and <summary> does not provide an explicit and strong semantic for an image long description. The 2012 HTML 5, editors draft states,

The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

An <img> element isn't a summary, caption, or legend. An <img> element is an image. An image and a long description are peers: the same thing expressed in two different mediums.