Using alt Attributes and Long Image Descriptions

As modem connections have become quicker, the Web has become increasingly graphical. Beautiful images are rightly loved. Some webmasters, however, take their images so much for granted that they don't consider how their pages may look and behave for others – for visitors on an old dial-up connection, for instance, or for visitors who cannot actually see their computer screen. Graphics that are not correctly implemented can damage a site as much as they can enhance it. To enjoy images correctly, they need to be made accessible by providing text alternatives. Alternatives are still provided on too few sites, but they are simple to implement and any conscientious webmaster should be aware of them. At least one prominent lawsuit (brought by a blind user against the official site of the 2000 Olympics) has highlighted the fact that this is an area in which carelessness shows.

Why use alternate text for images?

Providing text alternatives for graphics benefits everybody, and costs nothing but some time and organization from the webmaster.

It is necessary in order to accommodate visually impaired users. Web surfers who are blind, or who are too poorly sighted to focus on the screen, use text-to-speech software that reads pages aloud. This software cannot 'read' an image. Unless a text alternative is provided, the user has no way of learning what the image is supposed to mean – particularly incapacitating if it's a link button or imagemap. (A site that uses imagemap navigation without alt text may not be navigable at all.)

It is necessary if the site is legally required to accommodate users with disabilities (true e.g. of sites associated with the US government).

It is necessary for compliance with current and future Web standards. The alt attribute for images is mandatory in (X)HTML.

It is recommended in order to accommodate users who choose not to load images in their browser. Some people turn off graphics to speed download times on a dial-up connection; some simply aren't interested in seeing graphics while they're looking for information. All designers should experiment with seeing what these users see, by going for a jaunt with image-loading turned off (Tools > Internet Options > Advanced in Internet Explorer; Edit > Preferences > Privacy & Security > Images in Netscape; Tools > Options > Web Features in Firefox).

It is recommended for the convenience of Jane Average Web surfer, as well. Graphics, especially elaborate ones, take time to load. Alternate text allows visitors to skim buttons and headers etc. while the page is loading, helping them to find what they are looking for more quickly.

It is recommended as a means of boosting search engine rankings. Using alternate text means more keywords on a page. Some engines, e.g. AltaVista, take account of keywords in alt strings when matching search requests.

It is recommended for good customer relations and, in the case of major commercial sites, to avoid the possibility of being sued for discrimination…

The code

HTML 4 and XHTML feature two attributes for providing alternate text: alt and longdesc.

alt is an attribute of the img and area (imagemap region) tags. It can also be used within the input tag, to provide alternate text for graphical submit buttons.

An alt inserts a short text string that describes the purpose of the graphic. Its usage is mandatory.

longdesc is an attribute of the img tag. It associates the graphic with a URL where a long text description of the graphic can be found. Using longdesc is an optional extra. Browser support for this attribute is still spotty, but has been implemented in some of the more recent browsers.

Syntax:

<img src="image_filename" width="image_width" height="image_height" alt="text_string" longdesc="URL">

Using alt

In her guide to building accessible sites, Universal Web Design (1997), Crystal Waters suggests that an alt attribute 'should describe the function of a graphic, especially if it is a link, rather than describe the graphic visually.' The alt should work as a written equivalent to whatever the graphic was meant to signify. For instance, if the graphic in question is a link button, then the alt should repeat the text on the button.

A photograph or an illustration might have an alt indicating what it represents, e.g. 'Trees afflicted with Dutch Elm Disease' or 'Sam confronting Gollum'. This not only tells the visitor what the image is doing on the page, it helps a visitor who has image-loading turned off to decide whether it might be worth seeing. However, there might be cases in which alternate text for a photograph would interfere with screen readers outputting the content in a logical way, and it might therefore be better to treat the photo as a purely decorative image (see below).

Special-purpose Web graphics have their own conventions:

    
• For list bullets, use something like 'alt="o"' or 'alt="*"'. (However, an overall better way to use graphical list bullets is to insert them via CSS.)
    
• For graphics that are purely decorative and have no meaning (transparent GIF spacers, rounded corners, etc.), use empty quotes ('alt=""'). Empty quotes effectively tell the user agent that 'this image is unimportant'.

While not forgetting the main purpose of the alt, craft the text to include keywords that can be read by search engines. One way of seeding alt text with keywords is to add short, descriptive subtitles to the alts of banner graphics and buttons. (E.g. 'Black-snow.org: Gothic poetry and horror film reviews'.) Don't go overboard with keywords, however: keyword stuffing may be penalized by search engines, and it's not what alts are for.

Common errors with alt

alt text should not be used to create tooltip hover effects. The tooltip that appears when a graphic is hovered in Internet Explorer isn't standard browser behaviour. More standards-compliant browsers do not show one. This is important, since not only is an author influenced away from writing simple, functional alt text if they plan for it to be displayed as a tooltip, an author who uses the 'Hover over the image to see what it is!' hack leaves visitors with newer browsers blinking at nothing. The correct attribute for adding a tooltip is title (which works with any element, not just images).

Misuse of the alt attribute is also linked with the current fashion for Web site validation among homepage owners. I have seen sites in which all of the image tags included alts, as is required for a site to pass the automated W3C validator, but all of those alts were empty strings. Every single one, including link graphics. This is extremely bad practice, moreso since it is carried out in the name of validation. A site containing all empty alts will technically pass the automated check. But this is only because the validator cannot tell whether an img tag is justified in containing a blank alt or not. That is a job for manual checking. A site coded this way violates the substance and intention of Web standards and should not be regarded as valid.

There is a purpose for empty alt strings. As mentioned above, they should be used for images that have no meaningful function and are used purely for decorative effect. For example, a transparent GIF used to give shape to a layout is correctly coded with 'alt=""'. A visitor using screen-reading software can then confidently bypass the image, knowing that it offers no information. By the same token, using empty alt strings for functional images (e.g. headers and link graphics) is actively counter-productive. It tells the user agent to ignore images that are essential to comprehending the page. It might be worse than omitting the alt in the first place, because a blank alt will make the image disappear from some screen-reading software's output.

Using longdesc

While alt is used to describe the function of a graphic, longdesc is used to provide a detailed visual description. It is recommended for images that contain more information than can be conveyed using alt, e.g. story illustrations or technical diagrams. The description, which can be as long as is necessary, is stored on a separate page; the longdesc attribute gives the URL of that page.

For example, if the picture we identified in an alt as 'Sam confronting Gollum' was important for complementing and understanding an article about these characters (for anyone not following the jargon, Sam and Gollum are from J.R.R. Tolkien's The Lord of the Rings), we could write a long description to ensure that its meaning wasn't lost on a graphic-less visitor. It might read something like: 'Sam, his face streaked with dirt, stands over the smaller, hunched figure of Gollum. Despite his evident weariness, his pose suggests strength and a new-found authority.'

Since many browsers don't support longdesc, an alternate method of associating an image with its long description is to use 'D tagging'. Beside or below the image, insert a link to the long description and make the link text a single letter 'D' (e.g. <a href="URL">D</a>). Though still rare, 'D tags' are a recognized standard encouraged by advocates of Web accessibility. Using a 'D tag' in conjunction with longdesc ensures compatibility with both newer and older browsers.

Conclusion

Used properly, alt attributes and textual descriptions of graphics enhance the Web experience for everyone. They improve access and usability, enhance search engine placement, and demonstrate the care and good intentions of the designer. They are something that all designers can implement for a fairer, friendlier Internet.