Web Matters

The ALT attribute in HTML

If you want to know whether a website was put together by someone who actually understands web design, one good pointer is the use of the HTML ALT attribute. All too many web developers seem to not know or not care what this is for – and thereby unnecessarily reduce the accessibility of their sites.

The aim of this page is to briefly address how, and how not, to use it. The writing of good ALT texts is not always easy, and what constitutes a good ALT text is a matter of much discussion. But if you follow the advice on this page, you will at least be doing better than most web authors.

Purpose of ALT

So what is ALT for? As the HTML specification says:

“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.” (section 13.8)

“The alt attribute specifies alternate text that is rendered when the image cannot be displayed ... User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.” (section 13.2)

The purpose of the ALT attribute is thus to provide in textual form whatever information was provided by the image.

One of the reasons this can sometimes be tricky is that there are two main target groups, with somewhat different needs:

people who choose to surf with images turned off, to speed up downloading;
people who do not have the option of viewing the images, e.g. blind people using text-to-speech converters, or perhaps someone using a very old computer in rural Africa.

The first group is probably more numerous, but the second group is more important, since they have no choice in the matter. ALT texts are also of importance for search engines, which can typically do little with images, but can handle the alternative text.

Appropriate ALT texts

For the purposes of ALT texts, most images fall into one of the following categories.

If the image is purely decorative, containing no information, then use ALT="", or ALT=" " if spacing is needed, or ALT="*" for images used as bullets.
If the image is a link, provide link text as you would for any link without an image.
If the image contains meaningful text, then simply placing that text in the ALT attribute is nearly always appropriate. To take an actual example, on a book site a graphic telling you that the book is out of print should have ALT="Out of print" (and not ALT="", as the site actually had!). Though if one considers that the purpose of the graphic is to provide extra emphasis, something like ALT="NOTE: out of print" would also be reasonable.
If the image contains meaningful non-text information, for example a graph, then the situation sometimes becomes a little less simple. In principle one should have a text along the lines of ALT="Sales were fairly flat all year, with a small peak in November." But it may be difficult to express the information in a few words, and browsers tend to be poor at handling long ALT texts. So it is worth looking at using the LONGDESC attribute as well.
But some non-text information is straightforward: if one has used national flags to mark information relevant to a particular country, then the ALT text would simply be the name of the country.
A tricky situation is where the image is somewhere between decoration and information. For example the text of a speech may include a photograph of the speaker. For a blind person this probably counts as decoration, but someone who has switched images off would probably like to know what the image is, as he/she might like to download it after all. Probably the best solution is to give a brief description of the image. A useful convention which I have met a few times is to include it in square brackets to indicate that it is a description rather than a true alternative text. For example ALT="[Photo of John Smith]".

To check that the texts are reasonable, simply switch images off in your browser and reload the page. Or better still, look at the page in a text browser. You may find you need to add some punctuation, or a trailing space.

Of course some pages are intrinsically visual, where no ALT or LONGDESC text can possibly provide a reasonable alternative. It is unlikely however that these constitute more than a small fraction of the pages on the web.

Should you want a much more detailed discussion, see Jukka Korpela's Guidelines on alt texts in img elements, which also includes links to other relevant pages.

Common errors

Omitting the ALT attribute altogether

One commonly made comment is that one might as well omit the ALT attribute from decorative images, as ALT="" is just the same. Well no, it is not the same.

ALT="" says: this image contains no information;
an omitted ALT says: you're just going to have to guess whether this image contains any information or not.

In the first case a text browser normally shows nothing at all. In the second case it may insert [Image] or [Inline] or the name of the file, to indicate that there is something there.

To give an idea of the effect of omitting ALT attributes, here is the complete, unabridged home page of a fairly large multinational company, as seen through a text browser:

   [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE]
   [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE]
   [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE] [INLINE]
   [INLINE]
   [INLINE] [INLINE]
   [INLINE] [LINK] [INLINE] [INLINE]
   [INLINE] [INLINE]
   [LINK] [INLINE]
   [INLINE] [INLINE]
   [INLINE] [INLINE] [INLINE] [INLINE]
   [LINK] [INLINE]
   [INLINE] [INLINE]
   [INLINE] [LINK] [INLINE] [INLINE]
   [INLINE] [LINK] [LINK] [INLINE]
   [INLINE] [LINK] [LINK] [INLINE]
   [INLINE] [LINK] [LINK] [INLINE] [LINK] [INLINE] [LINK] [INLINE] [INLINE]
   [INLINE] [LINK] [LINK] [LINK] [LINK] [INLINE] [INLINE]
   [LINK] [LINK] [INLINE] [INLINE]
   [INLINE] [LINK] [INLINE] [INLINE]
   [INLINE] [INLINE]
   [INLINE] [INLINE] [INLINE]
   [INLINE] [INLINE] [INLINE]

And this company includes IT among its services. How much would this encourage you to buy from them?

Putting ALT text on decorative images

Occasionally one comes across sites where the author has blindly put an ALT text on all images, including the decorative ones. So one gets an almost unreadable mess like:

spacer-GIF Home Blue diamond Products Blue diamond Services Blue diamond Vacancies spacer-GIF

I am indebted to the late Alan Flavell for the following classic example from the web site of the US Embassy in Belgrade:

Small red bullet Response to Terrorism

For some further examples see his page of howlers, fortunately preserved.

Using ALT for text that all readers need to see

Some screen-based browsers display the ALT text temporarily (as a “tool-tip”) if one hovers over the image with a mouse. This is not the intended use of ALT, but it is not a major fault – though some readers do find it irritating.

As a result of this, some authors make the mistake of including text in the ALT attribute which is relevant to all readers, not just those who can't see the images. People using other browsers can then not see the text, nor those readers who are using a keyboard, or who have disabled tool-tips, nor those with printed copies.

Use of the TITLE attribute is better in this case, but if the information is important it is best simply to include an explicit text caption above or below the image.