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
- Describe what you see/what is visually evident.
- Describe from general to specific.
- Describe objectively and accurately. Don't describe motivations or intentions.
- Be descriptive. Try to use vivid, imaginative language.
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 a Normal Link
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
<img alt="Line graph of the number of subscribers. Described under the heading Number of Subscribers Long Description" src="graph.png"> […] <h4>Number of Subscribers Long Description</h4> […]
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
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
attribute to link extended descriptions with images in
HTML5-based content. In addition the
longdesc attribute can be used in XHTML and
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
<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,
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.
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.
aria-description has been added to the Accessible Rich Internet Applications (ARIA) 1.2 Editors Draft. This method would provide proper semantics. However, ARIA 1.2 is not yet a recommendation and
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
Accessibility groups at the W3C investigated using the HTML5
<summary> elements for long descriptions. These elements can be used to create a disclosure widget for showing and hiding content.
summaryelement represents a summary, caption, or legend for the rest of the contents of the
detailselement, if any.
<img> element isn't a summary, caption, or legend.
<img> element is an image. An image and a long
description are peers: the same thing expressed in two different
The W3C provides more options for providing long descriptions.