University of Minnesota Duluth block M and wordmark
Information Technology Systems and Services

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.

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.

When a long description is provided on the same web page as an image, its location can be described using the alt attribute of the image. The location information needs to be clear and accurate to help users locate the content. The syntax is:

  alt="Line graph of the number of subscribers. 
  Described under the heading Number of Subscribers Long Description"
  <h4>Number of Subscribers Long Description</h4>

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 a collection of tools. These tools can also be invaluable when writing and checking long descriptions. In Firefox, long descriptions linked by longdesc are available through "View description" in the image's context menu. There is an official Chrome Extension that adds long description access in a similar way. Safari has no support for longdesc. In other web browsers, longdesc is currently available only to screen reader users. Mobile platforms currently do not 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:

  alt="Line graph of the number of subscribers"

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:

  alt="Line graph of the number of subscribers"
  <div id="desc">
  <!-- Full Description of Graph -->

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.

Using longdesc Plus a Normal Link

Another approach to complex images is to either place the long description in context (on the page) or to provide a link plus the longdesc attribute that references the description. Long description pages can be helpful to all users, hence the visual link.

Other Methods


aria-description has been added to the Accessible Rich Internet Applications (ARIA) 1.2 Editors Draft. This method would provide proper semantics. However, aria-description currently has no implementations or support.


ARIA 1.1 is a W3C recommendation approved on Dec 14, 2017. The aria-details property could link to a HTML description. This method would provide proper semantics. However, it currently doesn't have as good of support as longdesc.

<details> and <summary>

Accessibility groups at the W3C investigated using the HTML5 <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 semantic. The semantics of <details> and <summary> does not provide an explicit and strong semantic for an image long description. The HTML 5 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.

More Options

The W3C provides more options for providing long descriptions.