To Speak an Image

The most important aspect to understand about the internet is that people use the Web in very different ways. Web designers cannot assume that everyone uses the same kinds of devices the same way.

The overall goal of a web designer is to create web content that is perceivable, operable and understandable by the broadest possible range of users and compatible with their wide range of assistive technologies, now and in the future.

This document does not want to be an exhaustive answer to an extremely complex problem, but it wants to show which minimal effort to do in order to make the internet more usable.

We will sum up what the official W3C documents and reccomendations say about images in web documents and will take a closer look at how to create text equivalents for non-textual elements, focussing on images. We will examine in detail the current support of software (browser) for alternative ways of presenting an image, and close with a few suggestions on how to describe an image.

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).

ToC

Images in the Specs

HTML 4.01

HTML 4.01 requires the use of the alt attribute for the image img element, in order to avoid problems with text-only UAs as well as to make image content understandable and navigable to users of non-visual UAs. The alt attribute specifies alternate text that is rendered when the image cannot be displayed.

Do not specify irrelevant or meaningless alternate text when including images intended to format a page, but use an empty string (alt="") instead - text or speech browser will simply skip the image silently. In any case it is deprecated to position elements on a page with the help of spacer images or using images for decoration purposes only - use style sheets instead.

ToC

WCAG

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.

The WAI is busy formulating guidelines for making the internet accessible to the broadest audience possible. These guidelines are primarily meant as a help for web or software developers. WCAG 1.0 is a reccomendation, integrated with the more technical Techniques, Core Techniques, HTML Techniques and CSS Techniques reccomendations; WCAG 2.0 still is a working draft, but it shows the direction the Working Group has been taking. Of the many technical documents planned to integrate the WCAG 2.0 only the HTML Techniques have the status of a working draft, the others still being in very early development stage.

A web developer shall create equivalent alternatives to auditory and visual elements by using alt or longdesc attributes on the img element, or by providing content to object elements. Images used for decoration only or used in order to provide bullets for lists, are best avoided - CSS is better used for this purpose, as they offer better fallback mechanisms.

ToC

Short Alternative Text
Every image has to contain a short text equivalent with the alt attribute. This text should provide a short description of the image, concentrating on the function and meaning of the image in the context of the web page rather than loosing itself in details. Due to software limitations it should not excede 150 characters.
Long Descriptions of Images
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, linked via the longdesc attribute. As support for this attribute still is not consistent, it sometimes has been suggested to provide a so-called d-link next to the image: this is a hyperlink anchor that simply displays the letter d and links to the long description of the image - but more recently this 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.
Content of Objects
Using the object element offers one big advantage over the img element: you can specify content of the element directly on the page, without the need of a separate file. Content of an object can contain markup, as opposed to the alt attribute of images.
Using Generated Content
A very useful CSS technique is to employ generated content to make some hidden attributes accessible: using the ::before and ::after pseudo-elements together with the attr() function to create content, you can for example display the alt-text of an image - note that it will be displayed even if the user has images turned off, which might lead to displaying the alt-text twice, once in place of the image, and once as generated content.
A Problem with the title Attribute
Though the title attribute can be used on most elements, and often provides useful and helpful context, it is better not used on images (WCAG 2.0 even says it should not be used), as the semantics of this attribute are too easily confused with alt and longdesc. It is reccomended to use a title for hyperlink anchors, and if an img is used as a link, the alt-text of the image should describe the function of the link - but leave the title for the wrapping a element (instead of the image), to provide contextual information about the hyperlink (e.g. "Off-site link") - support for nested elements containing a title is inconsistent and not clearly definided by official documentation.

ToC

Current Browser Support

Let us next explore current support of the main graphical web browser as well as of a text and of a speech browser for the attributes alt, title and longdesc for an img element - as a standalone element and nested inside a hyperlink anchor.

ToC

Image

Opera
Gecko Browser
IE
Lynx
Safari
Konqueror
pwWebSpeak

ToC

Image as a Link

Opera
Gecko Browser
IE
Lynx
Safari
Konqueror
pwWebSpeak

ToC

How to Describe an Image

The most appropriate alt-text communicates the purpose of the graphic, not its appearance. Sometimes, web developers add alt-text to an image that is exactly the same as the text next to it, but avoiding redundancy is a good practice.

A very interesting document of the NBA describes in detail what to take care of when describing a figure:

ToC

Further Reading

ToC