Long Descriptions

All non-text content that can be expressed in words has a text equivalent of the function or information that the non-text content was intended to convey.

A key concept of designing accessible web pages is to provide a text equivalent for every non-text element by means of short alternative text or, in case a short text should not be sufficient to convey the image's concept, meaning or function, by means of longer descriptions.

We will analyze in detail the available techniques to provide long descriptions to images on web pages from the point of viability of modern browser, as there still is some confusion among web designers on how to accomplish this in the best way.

Table of Contents

Create Equivalents

Guideline 1. Provide equivalent alternatives to auditory and visual content.

1.1 Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content).

There are several means of creating text equivalents to images on the page, depending on the code you used in first instance to embed the image itself into the page. There are two main techniques of inserting images into HTML:

Image

The first and most common way to include an image on a web page is by means of the img element. The alt attribute is required, and its function is to provide a short alternative text to be displayed in case the image cannot be rendered - either because not available, or because deliberately not rendered (text browser or a graphical browser with switched off image display).

In case a short description should not suffice to convey the meaning or function of the picture (this could for example be the case with a picture containing a graph), provide an additional long and detailed description in a separate file. There are two main techniques to link to the exernal page: the page can be linked at with the longdesc attribute or the so-called d-link, a hyperlink anchor placed next to an image, which simply displays the letter d and links to the long description of the image.

Support for the longdesc attribute still is not consistent throughout browser, and the d-link-technique has been deprecated: the link was considered to be disturbing the design of the page, and was frequently hidden with the help of style sheets, making it also invisble to screen readers.

ToC

Object

A different approach is possible by using the object element: the use of this element as opposed to the img element is reccomended - it offers a better flexibility for support of different image formats as well as better and saver means of linking to long descriptions of the image.

A key concept of the object element's design is that it offers a mechanism for specifying alternative object renderings: the element may be nested and may also have some content. If a UA cannot render the outermost object, it tries to render its contents - which, according to the specs, can be another object element or some markup.

The Fallback Concept

The most simple scenario, equivalent to an img with alt-text, is an object with the alternative text coded as content of the object.

<object data="image.png">
  alt-text
</object>

The UA will try to render the image, and, should it fail or be designed or configured not to display images, it would render the alt-text.

NOTE: It has been pointed out that Internet Explorer has problems with the object element, but there is a workaround: the main rule is that there should always be a .jpeg image to fall back upon, that is, the innermost image, before the element's content, has to be a .jpeg image (eventually even a non-existent .jpeg would do!) - otherwise the browser fails to display the alternative content!

Linking to a Long Description

One of the strong points of the object element is that the element's content can contain markup - and this brings us to our initial problem, linking to long descriptions of images: the object asks for a picture to be loaded and displayed; if loading should fail, the short alternative text is displayed, and this one in its turn is a hyperlink to a long description of the image.

<object data="image.png">
  <a href="url_to_long_description">alt-text</a>
</object>

This technique offers full accessibility and fallback to any kind of web browser, and in my eyes is the most elegant solution to linking to long descriptions of images.

ToC

Further Reading

ToC