Table of Contents

• Introduction
• 1. Conformance
  • 1.1 Dependencies
• 2. Use Cases and Requirements
• 3. The longdesc Attribute
  • 3.1 Extensions to the HTMLImageElement interface
    • 3.1.1 Attributes Attribute
• A. Acknowledgements
• B. References
  • B.1 Normative references
  • B.2 Informative references
• C. Change History

1. Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words must , should , and may in this specification are to be interpreted as described in [ RFC2119 ].

2. Use Cases and Requirements

There are many ways users can successfully interact with content even if they cannot see, or see well, images included in that content. The alt attribute is designed to ensure that for everyday work, a user has enough information to replace an image, and often this is more helpful than a detailed description of every image. The longdesc attribute is designed to complement this functionality, to meet the following use cases.

Use Cases

Describing Identifying a well-known image

There are many well-known images which are widely reproduced - Mona Lisa, Washington crossing some river, the Da Vinci picture of the guy in a square and a circle, Gerníka, well known. In some cases, such as "Mona Lisa", "Gerníka", Cubbin's "Lost", Leunig's "ramming the shears". While shears", the most effective way to refer identify an image to another person is by the creator, title, and similar information that would be found in a catalogue. But different people know the images by different titles, and some images have no widely known titles, visually recognising the titles. Identifying an image is often an important part of framing a discussion. Where the image itself cannot be seen, a description can often be used to offer easier recognition than the same recognition. cataloguing information, for example "Washington crossing some river, standing heroically in the boat, while soldiers do the hard work", or "the Da Vinci picture of the guy in a square and a circle".

Requires : Discoverability

Helped by : Inline, Reuse

Describing a complex diagram

In many environments diagrams are used to explain a concept or transmit information efficiently. Where a user has a reduced ability to see the image (poor contrast vision and other conditions are as relevant here as a complete lack of vision), a description can enable that user to understand the information being presented

Requires : Structured Markup, Inline, Reuse, Simple Return

Teaching Accessible Development

In many environments producing content that is accessible to users regardless of disability is a legal and/or market requirement.

Requires : Maintenance, Backwards compatibility

A self-describing artistic work

For many pages the visual design of the page is an important part of the message it conveys to a fully-sighted user, but the author would like to convey as much of that design as possible to a user with low or no vision available.

Requires : No visual encumbrance, Structured Markup

Helped by : Reuse, Simple Return

Referring to an existing description

Many well-known images are already described by other sources. The copyright on those sources may not be compatible with re-publishing the description, but there is little value in making a new one.

Requires : Reuse, Structured Markup, Simple Return, Optional Consumption

Helped by : No Visual Encumbrance

Linking to a description included within a page

In some cases an image already has a description included within a page. Making the linkage explicit can provide further clarity for a user navigating the page who is not able to interpret the default layout, e.g. because they have forced a re-layout of the page elements, or because they do not see the default visual relationship between the element and its description.

This practice also enables description to be provided for all users.

By keeping the association clear the content maintainer can more easily check that the description and link are actually correct.

Requires : Inline, Simple Return, Structured Markup, Optional Consumption

Localising descriptions

When content is localised to multiple languages, it is important that metadata intended for human consumption, such as image descriptions, can be readily localised.

Helped by : Structured Markup, Reuse, Maintenance.

Requirements for an Image Description functionality

No visual encumbrance

It must be possible to provide a description for an image without any visual encumbrance on the page.

Structured Markup

It must be possible to include rich markup (e.g. HTML5) in the description of the image.

Inline

It must be possible to associate a description in the body of a page with an image in that page.

Reuse

It must be possible to re-use a single description for multiple occurrences of an image.

Maintenance

It must be simple to maintain a library of images and descriptions for dynamic assembly, or dis-assembly and re-assembly, of content.

Discoverability

It must be simple for a user agent to automatically discover a description provided for a given image.

A user should be able to determine that there is a description available for a given image.

Optional consumption

A user must be able to choose not to read the long description of a given image.

Simple return

A user must be able to return from the description to the image.

Backwards Compatibility

It should be possible to use existing tools and techniques to associate an image with its description.

3. The longdesc attribute

3.0 Implementation

3.0.1 Authors and Conformance checkers

partial interface HTMLImageElement {
             attribute DOMStringa> longdesc;
};

//Make
the
first
internal
longdesc
reference
absolute
var
baseURL
=
document.location.origin
+
document.location.pathname
var
someImage
=
document.querySelector('img[longdesc^=#]');
someImage.longdesc
=
baseURL
+
someImage.longdesc;

//Make the first internal longdesc reference absolute

var baseURL = document.location.origin + document.location.pathname
var someImage = document.querySelector('img[longdesc^=#]');
someImage.longdesc = baseURL + someImage.longdesc;

//Open
new
windows
for
each
longdesc
found
var
describedImages
=
document.querySelectorAll('img[longdesc]');
for
(i
in
describedImages)
{
if
(i.
longdesc
)
//there
are
a
couple
of
extra
things
matched
window.open(i.
longdesc
);
}

//Open new windows for each longdesc found

var describedImages = document.querySelectorAll('img[longdesc]');
for (i in describedImages) {
  if (i.longdesc)
    window.open(i.longdesc);
}

//Tries to repair errors where the longdesc isn't a URI

var describedImages = document.querySelectorAll('img[longdesc]');
for (i in describedImages) {
  if (i.longdesc && !(validURL(i.longdesc)) { //assumes some URL validating function
    var theData = encodeURIComponent(i.longdesc);
    i.longdesc = "data:text/plain;charset=";
    i.longdesc += document.charset;
    i.longdesc += theData;
  }
}