I have one or two original ideas about alt text, but let’s start with the basics.
Firstly, you have to have it. If you don’t have an alt attribute for every image on your Web page, you won’t be producing valid HTML. It won’t validate. Worse, you will be depriving a large number of your visitors, who may be blind or colour-blind or have other visual difficulties. They will not get value from your page.
Secondly, it should provide the next best thing to the image itself. If an image is of something beautiful, for example, you should try to convey that beauty in words. Don’t say
alt="tree"
Say
alt="A cherry tree loaded with pink blossom, glowing against a clear blue sky"
Similarly, if the image communicates meaning. Spell out the meaning in words. (And if it’s purely decorative and otherwise redundant, should it be on your page at all?)
Of course, we don’t often find the time to do this properly. We’re in a hurry, and want to get on to the next page on the site. And here I must hold up my own hands. I will spend hours getting a page layout right—but not give a few minutes to thinking of really useful alt text. (I mean to do better. I really do…)
Anyway, a couple of tips.
- Provide a title tag, too, if you don’t want Internet Explorer to display your alt text as a tool tip. An empty string is often useful here—or a single-word caption.
- Try beginning and ending your alt text with brackets, so plain text browsers like Lynx make it clear it’s not a continuation of other page text. Using the word “Image: †straight after the opening bracket is often a good idea. So your actual alt text will be something like “(Image: a cherry tree loaded with pink blossom, glowing against a clear blue sky)â€
That kind of thing.
