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

Example Long Text Alternative Markup

This page provides example long text alternative markup for:

  1. Complex Data Images
  2. Pictures
  3. Symbols
  4. Functional Images

1. Complex Data Images

Complex data images include: charts, graphs, and diagrams. They allow sighted users to understand data and data relationships. These visual representations can convey a vast amount of non-text content. In addition to a short text equivalent, for many data images it may be necessary to provide more detailed information or supplemental content in the form of a long text alternative. The National Center for Accessible Media's Effective Practices for Description of Science Content within Digital Talking Books provides useful information on writing long descriptions for complex data.

Line Graph Using longdesc for an Off-Page Description

Context: A line graph depicting number of subscribers. It uses short the alt attribute to give the user an overview of the content of the image and the longdesc attribute to provide a programmatically determinable long description in another page. Note that the longdesc attribute points to a URL. 

<img
longdesc="ld/graph.html"
alt="Line graph of the number of subscribers"
src="images/graph.png">

Live example of line graph using longdesc for an off-page description:

Line Graph Using longdesc for an On-Page Description

Context: A line graph depicting number of subscribers. It uses short the alt attribute to give the user an overview of the content of the image and the longdesc attribute to provide a programmatically determinable long description on the same page. Note that the longdesc attribute uses a #fragment identifier (sometimes known as an anchor) to point to an id attribute on the current page. 


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

Live example of line graph using longdesc for an on-page description:

2. Pictures

Images of pictures include visual representations of objects, artwork, people, scenes, abstractions, etc. This non-text content can convey a significant amount of information visually or provide a specific sensory experience to a sighted person. Descriptions of what a picture looks like can be useful to those who are interested in the subject matter or the visual qualities of an image and who would otherwise be deprived of the content. Joe Clark and provide useful information on writing long descriptions for pictures. In addition 3 Tips for Writing Long Descriptions of Pictures provides guidance.

Snapshot Using longdesc for an Off-Page Description

Context: A candid photograph of Adam Moran and his daughter in a newsletter article. It uses a normal link below the image to go to a separate long text alternative page. Note: This method is programmatically determinable and semantic. 


<img 
longdesc="../ld/adam.html#content_frame">
alt="Photo of Adam Moren with daughter"
src="../images/adam.jpg">
</a>

Live example of a snapshot using longdesc for an off-page description:

Snapshot Using a Link for an Off-Page Description

Context: A candid photograph of Adam Moran and his daughter in a newsletter article. It uses a normal link below the image to go to a separate long text alternative page. Note: This method is not programmatically determinable or semantic. 


<img 
alt="Photo of Adam Moren with daughter"
src="../images/adam.jpg">
<a 
href="../ld/adam.html#content_frame">A description of Adam Moran's photo is available.
</a>

Live example of a snapshot using a link for an off-page description

Image of a Painting Using a Link in a figcaption Element

Context: Image of a painting inspired by a poem, on a page reciting that poem. In this case it is Waterhouse's 1888 "The Lady of Shalott" painting which was inspired by Tennyson's poem of the same name.

In addition to the name provided via the alt attribute, a detailed description is provided on another page, which is accessed via an a normal link inside of a HTML5 figcaption element. A link around the on-page image goes to larger image when selected.

This is not a semantic method for a long description as the link is a generic link but it is programmatically determinable. A visible link such as this may benefit not only users of assistive technology, but others as well. 


<h1>The Lady of Shalott by Alfred, Lord Tennyson</h1>
<figure>
<a href="http://www.mysite/images/shalott1x.jpg">
<img 
alt="The Lady of Shalott"
title="select for a larger image"
src="http://www.mysite/images/shalott.jpg">
</a>
<figcaption>The Lady of Shalott by John William Waterhouse. A painting inspired by Tennyson's poem.
<a href="http://www.mysite/desc/shallot.html">A description of the painting is available.</a>
</figcaption>
</figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem -->

Live example image:

3. Symbols

Images of symbols are graphic representations that signify some concept, object, entity, quality, or brand. A symbol may be used to imply or represent a meaning beyond the obvious and apparent. Examples include: logos, headers, icons, and emblems. Descriptions of what a symbol looks like may be appropriate to provide for those who may be interested in the visual qualities of the image.

Context: A page provides an on-page long descrption for a biohazard icon. This is both a semantic and programmatically determinable method of providing a long description. Note how the longdesc attribute points to an id attribute. 

<img
longdesc="#desc"
alt="biohazard"
src="../images/biohazard_symbol.png">
<div 
id="desc">
<!-- Full Description of Symbol -->
<p>Long description ends.</p>
<div>

Live example of a header using longdesc for off-page description:

4. Functional Images

Functional images are images that allow the user to 'do' things. They provide functionality. Activating or selecting a functional image causes something to happen, such as activating a link that causes a resource to be retrieved. Examples include: navigation logo links and lightbox images.

Context: Logo that links to a home page on a website.

Providing a semantic longdesc with the same link each time on a logo image makes it programmatically determinable that the user has access to the description. longdesc enables users of assistive technology such as JAWS to separate the activation of the longdesc for exposure from a user agent's universal link activation action (which is usually activated with the ENTER key, the SpaceBar, or by mouse click), so that the linked image retains the expected behavior in response to user interaction while a discrete mechanism is used by screen readers to retrieve the long description. Note that the longdesc attribute points to a URL. 

<div id="header">
<img src="img/logo.jpg" alt="Sights Unseen" longdesc="logoLD.htm"
width="314" height="107" />
<h1>Oedipus' PhotoALBUMs</h1>
</div>

Live example of a logo using longdesc:

Note: The same long text alternative page is utilized on all of the sub-pages on this site for the logo image. e.g., Popper, Clovis, Miss Mouse, and Gregory and Miss Mouse all point to the same long Description of the logo page.

Line Graph Using longdesc for an Off-Page Description While a Normal Link Provides Larger Image

Context: A line graph depicting number of subscribers. It uses a link to go to a larger image and the longdesc attribute to provide a programmatically determinable long description link to a long description in another page. 


<a href="images/graph1x.png">
<img
longdesc="ld/graph.html"
alt="Line graph: Number of subscribers">
src="images/graph.png">
</a>

Live example of a line graph using longdesc for off-page description while a normal link provides a larger image: