`ALT`ernatively

I’ve spoken about images before: the importance of keeping them small (in bytes), their iconic functions, use as background images, and also animated images. However, one important aspect of the use of images has hardly been touched upon: the ALT text.

The first thing to say, to satisfy pedants everywhere, is that there is no such thing as an ALT tag, despite that term being used frequently on the Web and Usenet. What we are talking about is the ALT attribute of the <img> tag (and some others). There is some confusion about its use, and one feature of recent versions of MSIE hasn’t helped.

In fact the concept is quite — possibly deceptively — simple: ALT text is text provided as an alternative for situations when the image is not available. That means: when someone is using a text-only browser, or has disabled graphics loading in their browser, or is using a page reader — or, of course, when some error means the graphic fails to load. This is how the W3C puts it:

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The W3C recommendations make the use of ALT text mandatory with <img> and <area>, but optional for <applet> and <input> (which I’m not considering here). They also note that it must be handled with care. The point about ALT text is that it is there to improve accessibility to users who cannot, for whatever reason see the image, and that needs to be borne in mind when writing it. The first, crucial thing to do is work out what the image actually does in the first place. Getting this wrong is usually why we screw up with ALT text. Assuming we use it at all, of course.

I say ‘we’ because everybody does get it wrong some of the time. Some people get it wrong all of the time, and some people get it wrong only very rarely, but we all do get it wrong at times and it is generally because we make some mistake about the function of the image on the page.

On a web page, an image may be:

a replacement for text
an illustration
a decoration
a link
a bullet
a divider

The first use, where the image is in fact an image of text, is clearly very simple: the ALT text should be the text [Image: blue button GIFs used in a table of contents] incorporated in the image! An example of this would be the logo on this page.

The fifth item, using, say, a blue circle to act as a bullet, as illustrated here, often leads to confusion over what the ALT text should be because there is an impression that it should be a description of the image. The folly of that can be seen if we imagine using ALT="blue bullet" as the ALT text for that illustration — it would produce this result in Lynx:

[Image: 'blue button Introduction blue button About the Club blue button Activities blue button Location' ]

The only effective ALT text would be to use ALT="* ", but it would be much better not to use graphics for bullets in lists in the first place: stick with the straightforward use of <ul> and let the browser render that as it can.

Similarly dangerous is the way some approach ALT text when a divider graphic is used instead of <hr>. The best illustration of this is quoted by Alan Flavell (he has gathered quite a collection of ill-conceived ALT values):

My favourite howler went something like this
<center>
<font size=6>Our Classrooms and Staff</font>
<img src="rule.gif" alt="fancy horizontal rule">
</center>
Instead of using <h1> for this first level header, they had simply marked it up with a font size. So, there was no linebreak implied between the text and the image. Now, when displayed with image loading on, this was not a problem: the “fancy horizontal rule” was so big that it automatically went onto a new line. However, with text-mode browsers this whole thing was quaintly rendered as

Our Classrooms and Staff fancy horizontal rule

The logical ALT text would seem to be a row of dashes, but how would that sound to a blind user? If you need to use a divider, it is best to stick with <hr> — but most of the time you don’t need to use a divider. Use of white space and headers (<h2> – <h6>) can easily delimit separate sections of a document.

Using images as links

Use of images for links is fraught with problems but is very common. What ALT text is appropriate for an image used as a link? Well, one thing that is not usually appropriate is a description of the image. Suppose we think for a minute of Jerry Pournelle’s site, which we’ve discussed before. You may recall that he uses an animated GIF of a blimp for the mailto: link on his page.

In passing, I’ll comment that on recent viewing some aspects of his site have improved but the total impression is more negative: the blimp has been moved to a more prominent, and therefore more irritating, position, there’s another animated GIF, of a spinning globe (Web cliché number 3), and one of those damn ‘digging man’ GIFs (cliché number 2; for those wondering, cliché number 1 is white text on a black background).

In fact, Jerry Pournelle doesn’t have any ALT text for that image (somehow I’m not surprised) — but if he did, what should it be? Well, one thing it definitely shouldn’t be is ALT="Blimp with e-mail written on the side bobbing back and forth" or any variation of that. For those who can see the image, the use of the blimp has a certain slight freshness and charm. This is not in any way communicated by a plain description of the animated image.

The actual function of the blimp is twofold: first and foremost it is a hyperlink to open up a blank e-mail addressed to Pournelle; its decorative-cum-amusement function is very much secondary. The ALT value should communicate the first, but the second cannot really be served by plain text and you shouldn’t make the attempt. An appropriate ALT text here would be ALT="email Jerry Pournelle [his email address]"

(If you are wondering why I suggest putting his e-mail address there, it is because not everyone is surfing the Net in a location where clicking a mailto: hyperlink will open an e-mail client — so the user needs to be able to get the e-mail address to, for example, use it from a webmail account. For the same reason, don’t attempt to hide the status bar display of an e-mail address when the cursor runs over the link.)

Pournelle has now added ALT text to that image. The text he has provided is: “email blimp. Click to send email to me” — that’s not ideal (if you had never seen the site in a graphical browser, what would you make of “email blimp”?) but it does communicate what the link is supposed to do; it is not helpful, though, if your setup doesn’t open your mail client with the address in the TO: field. It’s a big improvement, though, making the site more usable.

Decoration or illustration?

The biggest problems tend to arise because of a confusion between images used as illustrations and images used as decoration. The difference should be easy to grasp: illustrations in some way add to the content of the page, either by presenting information in a graphical form (a pie chart, perhaps) or by showing an example of something discussed in the text; decorative images add nothing to the content itself, they make the presentation of it (the designer hopes) more attractive.

For example, there is no point in using alternate text which says something like "fancy Celtic knotwork border in yellow and orange". The image is decorative, the description isn’t; what will someone blind who has never seen Celtic knotwork make of it anyway?

There might be, though, a lot of point in using ALT text which says "Pie chart showing percentages of different browsers used by visitors to this site over the past six months: NS1 1%, NS3 3%, NS4 24%, IE3 1%, IE4 33%, IE5 15%, Other 23%". This is a bit long, so longdesc would be a better choice for all this data, but the point is it contains all the information the pie chart does and makes it available to users who cannot see the graphic, for whatever reason.

(That assumes, of course, that the point of the chart is to convey such precise information; if the aim is merely to say "Almost three-quarters of our visitors use a version 4 or higher browser", say that.)

One trap to avoid is using ALT text such as "pie chart of browser usage". What use is that? It tells users who can’t see it that the chart exists, but they have no way of knowing what information it provides. It is essential to actually think about what function an image serves on the page and write the ALT text appropriately.

We’ve now seen that there are some cases when ALT text may be inappropriate, notably when a graphic serves a purely decorative function. It is also obvious, or should be, that a transparent GIF used to help layout doesn’t need ALT text. Specifically, it doesn’t need something like "spacer" as the ALT value. (If you want to see how bad the result can be, take a look at Alan Flavell’s page on ALT text and look for the ‘anonymised extract from the front page of a German web service provider.’)

The approach in these cases is not to omit the ALT attribute altogether. That is not just because it is required by the W3C recommendations (so if your page has ALT-free images or image maps, it won’t validate): if a page containing images without ALT text is loaded into Lynx, which is some guide to how accessible documents are, what happens? Take a look at this screenshot:

[Image - screenshot showing all images' ALT text as [INLINE], [LINK] or [USEMAP] with almost nothing else on the page]

That is a page composed almost entirely of images, none of which have an ALT attribute. An image without an ALT attribute registers as [INLINE] (or [USEMAP] if an imagemap); if it is used as a link, it shows up as [LINK]. Simply adding an ALT attribute will replace these unhelpful words with the ALT text. Simple enough, yet there are plenty of sites where the navigation appears as:

[LINK][LINK][LINK][LINK][LINK][LINK]

Almost as bad in usability terms as not having the navigation available at all — which is, incidentally, what would happen if you were foolish enough to use ALT="" in an <img> used as a link. (A note in passing: the W3C’s accessibility guidelines recommend having links separated by more than just white space.)

It’s bad enough having [INLINE] appearing in place of an image used for illustration or decoration, but having it occur at every instance of a transparent GIF is much worse. The design guru who is generally quoted (by himself as much as anyone elese) as being the inventor of the use of the single-pixel, transparent GIF to force page layouts is David Siegel. He almost never uses (or maybe I should say used since he doesn’t seem to design sites now) ALT text with his images, including the single-pixel GIFs. You can imagine how that looks to Lynx — and how it might sound to a screen reader.

So omitting the ALT attribute is a bad idea. When there is no appropriate alternate text for an image, the answer is to use ALT="".

To summarise what we have said so far:

When the <img> is an image of text, the ALT text should be the same text.
When the <img> is an illustration, the ALT text should convey the point(s) it is illustrating, not describe the image.
When the <img> is purely decorative, the most appropriate approach is usually ALT="".
When the <img> is a link, the ALT text needs to communicate where the link leads rather than describe the graphic.

`ALT` & `TITLE`

The final point to clear up is a misconception fostered by recent versions of MSIE. In these browsers, running the cursor over an image brings up a tooltip containing the value of the ALT attribute. A lot of people don’t like this, and some people actually don’t use the ALT attribute because of it.

This is absolutely not how the ALT attribute is supposed to function: the function of ALT text is wholly different from the function of tooltips. If ALT text is prepared with tooltips in mind, the chances are it will be inadequate as alternate text for the image; if ALT text is properly written, it will probably make a pointless tooltip.

To repeat: ALT text is an alternative to the image, to take its place when the image cannot be seen. Tooltips, if used (and available), should provide information supplementary to the image, information which is useful even when the image is visible. Clearly, using the ALT attribute as a source of tooltips is a bad idea. It would be good if Microsoft fixed this — I’m not going to hold my breath though.

If you actually want a tooltip, the attribute to use in the <img> tag (and others) is TITLE. This is also the key to getting rid of unwanted tooltips: using it with no value stops the ALT text being used for a tooltip:

<img src="pie1.png" alt="Almost three-quarters of our visitors
use a version 4 or higher browser" title="">

Summary

ALT text should be used to communicate the information presented by an image to users who cannot see it; usually this will not be a simple description of the image.
Where an image conveys no information, being used purely for decoration or to force layout, use ALT="".
Never use ALT="" in an image which is a link.
It is a good idea to combine the ALT attribute with TITLE="" to prevent unwanted tooltips in certain browsers; when a tooltip is needed, it will almost certainly not be appropriate for it to be identical to the ALT text.
Every <img> must have an appropriate ALT attribute.

In conclusion

Using the appropriate ALT text is an indispensable part of designing web sites which are going to be as widely accessible as possible — and not doing so can land you in hot water, as SOCOG found out:

In a landmark ruling by the Australian Human Rights and Equal Opportunity Commission, the organisers of the Sydney Olympics were found to have breached section 24 of the Australian Disability Discrimination Act (1992) by failing to make their web site … accessible to people with visual impairments. They were ordered to take immediate action to make the Olympics and Paralympics sites accessible. Although the commission is not a court, legally enforceable damages of AUS$20,000 have been awarded against the organisers.

Accessibility is no small matter, and ALT text is a very simple thing to add to your document as you prepare it. In some parts of the world, accessibility is legally required. That may or may not spread, but in any case if you fail to make your page accessible to as many people as possible the only person you are really hurting is, in the end, yourself.