Anybody who has been involved in web development at all but the most superficial levels knows about the importance of the alt attribute for images in web pages. It functions as a text replacement for the image in circumstances where the image cannot be displayed.
A couple of days ago, a colleague asked my advice about appropriate alt text for an image - in this case a head and shoulders portrait accompanying an online bio on a web page. I suggested that he used the empty string as the alt text. He reacted with mock horror: "Blank alt text? You can't have that!"
Using the empty string is actually a perfectly valid use of the alt attribute in some circumstances. Here's a quote from the relevant part of the specifications:
"Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string ("")."
The best way to understand the alt attribute is to think of the img element as an element which has two, equally important, attributes: src, which gives the URI for the image itself, and alt, which provides a short text equivalent for the image. alt and src should describe the same thing, but in different ways. alt is not supplementary to src: it is equivalent to it. alt should be the empty string when everything the image says is said elsewhere in the document, or the image doesn't really say anything. Have a look at Guideline 1 and its checkpoints on the Web Content Accessibility Guidelines 1.0. Guideline 1.1 in the Web Content Accessibility Guidelines 2.0, which is at the draft stage at the time of writing. The empty string alt attribute covers the "Non-text content that does not provide information or functionality is marked such that it can be ignored by assistive technology" requirement.
How do you know whether or not everything the image says is said elsewhere? Imagine you are reading the webpage to someone over the phone. Would you feel you had to describe the image? That description would be an appropriate value for the alt attribute. In the case I mentioned at the start of this article, I wouldn't describe the head and shoulders portrait in any detail. In fact I'd be inclined to ignore it completely, because it didn't add anything to the bio except some visual impact. That's why I suggested the empty string for the alt attribute.
If you are going to enter the empty string for an alt attribute, why not just leave it out together? Think about the difference between the following two examples.
<img src="foo.png"/>
and
<img src="foo.png" alt=""/>
The first says "There is no text equivalent provided for this image". The second says "This image does not need a text equivalent in its current context".
title and longdesc
There are another two useful attributes for the img element: title and longdesc. The first is kind of like a brother to the alt attribute. According to the specs, title "offers advisory information about the element for which it is set" - in other words, for images it offers additional information about the image: additional, that is, to the information that alt and src both communicate.
Suppose you had a detailed image which provided essential information for the page. The alt attribute just takes a string of text. You can't structure the information in any way. This makes it impractical to use the alt attribute for detailed images. The specs provide an additional attribute - longdesc - for use in these circumstances. The value for the longdesc attribute should be the URI of a webpage that has a longer description of the image. The longdesc should be a supplement to the alt.
Published September 25, 2004