HTML5 Image Description Extension (longdesc)

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 Attribute
• A. Acknowledgements
• B. References
  • B.1 Normative References
  • B.2 Informative References
• C. Change History

1. Conformance

All authoring guidelines, diagrams, examples, notes, and sections marked "informative" in this specification are informational. Everything else in this specification is "normative" as described in [QAFRAME].

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

2. Use Cases and Requirements

The longdesc attribute gives authors a mechanism for referencing a long text description for images which cannot be adequately described using shorter description mechanisms, such as in the following use cases.

Use Cases

Identifying a well-known image

Identifying an image is often important context for a discussion. There are many well-known images which are widely reproduced and well known. In some cases, such as "Mona Lisa", "Guernica", "A Starry Night", or "The Scream", the most effective way to identify an image is to use its title, creator, and similar information that would be found in a catalog. But different people know images by different titles, and some titles are not well known. When the image itself cannot be seen, a description can often be used to offer easier recognition than the cataloging information, for example "Washington crossing a river, standing heroically in a boat, while soldiers do all the paddling", or "the Da Vinci picture of the man in a square and a circle".

Requires: Discoverability

Helped by: Inline, Optional Consumption, Reuse, Simple Return

Describing a complex diagram

In many environments diagrams are used to explain a concept or transmit information efficiently. For a user with 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

Helped by: 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: Backwards Compatibility, Maintenance

A self-describing artistic work

The visual design of many pages is an important part of the message the author intends to convey to a fully-sighted user. Many authors would like to convey as much of that design as possible to a user with low or no vision.

Requires: Discoverability, 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: Discoverability, Optional Consumption, Reuse, Simple Return

Helped by: No Visual Encumbrance

Linking to a description included within a page

If an image already has a description included within a page, making the linkage explicit can provide further clarity for a user who is not able to interpret the default layout. For example this happens when users force a re-layout of the page elements because they have magnified the content, 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: Discoverability, Inline, Optional Consumption, Simple Return, Structured Markup

Localizing descriptions

When content is translated to multiple languages, it is important that metadata intended for humans, such as image descriptions, can be readily localized.

Helped by: Structured Markup, Reuse, Maintenance.

Image search

Many search engines provide an option to search for images and present the results out of context. The ability to discover and process identified descriptions allows search engines to improve the source material they use to support text-based queries for images.

Requires: Discoverability

Helped by: Structured Markup

Describing images

Image search tools identify multiple copies of the same image. Where a search tool can identify a description of an image, this can be provided to the user as a description for any copies of that image.

Requires: Discoverability

Helped by: Reuse

Requirements for an Image Description Functionality

Backwards Compatibility

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

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.

Inline

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

Maintenance

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

No Visual Encumbrance

It must be possible to provide a description for an image without forcing the description to be rendered on the page.

Optional Consumption

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

Reuse

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

Simple Return

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

Structured Markup

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

3. The longdesc Attribute

This extension changes the definition of a hyperlink in HTML, by allowing a longdesc attribute to occur inside a hyperlink.

3.0 Implementation

3.0.1 Authors and Conformance Checkers

Example: (Informative)


<!-- Image with description that is only part of target document -->
<img src="foo.png" alt="Example image" longdesc="example.html#desc2">

<!-- Target document -->
<section id="desc2">
  <h2>Image foo.png</h2>
  <p>Description of the image...</p>
</section>
          

partial interface HTMLImageElement {
             attribute DOMString longDesc;
};

Example: (Informative)

/*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;

Example: (Informative)

/*Open new windows for each longdesc found*/

var describedImages = document.querySelectorAll('img[longdesc]');

for (i in describedImages) {
  if (i.longdesc)
    window.open(i.longDesc);
}

Example: (Informative)

/*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;
  }
}