Tips for Web Authors

ALT text on images

ALT is short for "text alternative". The crucial word there is "alternative".

The purpose of the text alternative is to provide meaningful information in the event that the user is unable to see the graphic.

"But doesn't everyone these days have a graphical browser? I mean, I can understand blind users not seeing images but surely everyone else will?"

That statement displays a quite stunning level of ignorance of how other people use the WWW.

Here are just a few of the reasons why someone might not see graphics -

* They work in an office where last week an employee was caught downloading porn so the company firewall has been set to accept only text (you might be surprised how common that one is)

* They don't have access to broadband and are on a modem dialup so they are browsing with image-loading switched off to save time and money

* They are working on a machine which runs a non-graphical operating system and so have to use a text-only browser

* They are fed up with wasting time on graphics-heavy pages which provide little or no useful information and so they browse in text-only mode as a way of fast filtering to see if a site is worth bothering with

One of the great novice mistakes is to put something like "image" in the ALT tag. All that's doing is insulting the user's intelligence. We know it's an image, why is it just telling us what we already know? What it should be doing is giving us the equivalent information in text form that we would have gained had we been able to see the graphic.

The late Alan Flavell said it best :

"The ALT text is meant to be alternative text, primarily for use when the image is not being displayed. The most common mistake (...) is to provide a description of the image, without considering what job the image was doing on the page, leading to results that can range from the incongruous to the absurd. The ALT text is intended to be a suitable textual alternative to the purpose of the image"

Example

Let's imagine your home page has navigation links to : a biography, a discography, a gigslist, a photo gallery, a page with mp3s and a page of links to your friends.

You spend ages doing a series of wonderful little graphic icons to act as links and put them in a vertical column on the left side of the page. Looks great. And, being a conscientious web author, you remember about the need for ALT text. But that's a bit less exciting than doing graphics and you can't really think of what it should be, so you set the text in each to say "link button". That should do it, it adequately describes what the graphic is for, doesn't it? And what the person browsing without graphics sees or hears is the following -

link button
link button
link button
link button
link button
link button

That's really going to help them find what they're looking for, isn't it?

The sensible text alternative to a button icon which says "Discography" isn't "button" or "link icon", it's "Discography". "Button" or "link icon" are describing the graphic, not giving a text alternative to the content.

When writing text alternatives, the question to consider is "what is the purpose of this graphic?" and then find a way of expressing that in text.

Here's another example

You have a list of people you've worked with and to add a bit of eye-candy, you do a nice wee image of a red blob before each name. So what you have is -

<image>Mary Bloggs <image>Joe Smith <image>Elvis Persil <image>God <image>Genghis McCann

After racking your brains for a while to think of a suitable text alternative to put in the ALT tag, you finally settle on "red blob".

Know what someone using a non-graphic browser is going to see or hear?

Here you are -

red blobMary Bloggs red blobJoe Smith red blobElvis Persil red blobGod red blobGenghis McCann

In cases like that one, the best alternative content would probably be something like a simple "*" so that the final result would read:

*Mary Bloggs *Joe Smith *Elvis Persil *God *Genghis McCann

Alan Flavell used to give a list of real howlers and my favourite was one where the page said "Our Classrooms and Staff" and this was followed by a graphic which consisted of a decorative horizontal rule. Naturally, the ALT said "fancy horizontal rule" and so what non-graphic browsers presented was :

"Our Classrooms and Staff fancy horizontal rule"

The simple way to avoid inflicting that kind of humiliation on yourself is to switch off graphics and take at look at what happens with your ALT text before letting it loose on the WWW.