What is it about the ALT-tag?

You may have heard around in various places that you should always use the ALT-tag, but what is it really about? And why should you use it?

If we look up the in the attributes at the W3 Consortium we'll see under ALT:

What does this mean for you? It depends wether you're making or visiting the pages, of course, but let's take it in detail, point by point.

It's used with the elements IMG and AREA.
This means that whenever you want to use a picture or imagemap on your page, you should include the ALT-text, the short description of the image, and/or the links in an imagemap. But why should you use it? Isn't the image enough? Yes - and no! If you see the image, then of course that is enough, but not everyone do see it. It's not only blind people that don't see pictures, many people turn off image loading to download the pages faster, or use text-based browsers like LYNX. Even with imageloading on, it can be useful with ALT-texts, as you can read that while the page is loading, giving you an impression of the page early on.

It's required to use.
It can't be said more clearly than that, can it? And it does help making your site more accessible

It's a short description.
Maybe the most difficult point. It's a description of the image, or the part of an area in an imagelink, but what should be described? And how?

A picture of you in your new leather-dress, or one of an old ox-whip, deserve a description. Something like "Picture of me in a black leather-dress", or "Granny's old ox-whip" will do fine. If the image is a link, say where the link goes, just as if it were a text-link.

If you have a design where you use heart-shaped bullets (instead of using <LI>), should you use "Heart-shaped bullet" as an ALT-text? That's descriptive. Or maybe you should use "*" to represent the bullet? What about a horisontal line? Should you describe the line, or use a lot of dashes to represent it?

Users of browsers such as LYNX won't see the image, just the short description. Seeing the text "Heart-shaped bullet" in front of all the points made looks ridiculous, and a text describing a horisontal line just as bad. Likewise, an aural browser (one that read the text aloud for the person using it) would read the text the same way. A LYNX user may see a line of dashes if that's used as description for the horisontal line, but how would an aural browser read it? "Dash dash dash dash dash..." - not exactly what you had in mind, I guess.

So maybe you should just avoid using the short description for those images? No, that's a bad choice! Those would show up like [INLINE IMAGE] (or something like that.) A better choice would be to use the empty description (ALT="") or a space (ALT=" "). That way nothing silly would show up in text based browsers (like LYNX) nor would it be read aloud in an aural browser.

Now I have said that you should use ALT-text, that you should use descriptive text, or none at all. When should you use the text, and when not? In short, if the picture serve a purpose other than pure design, use a description, otherwise use the empty description. As a simple test, read the texts out loud for yourself, or a friend. Does it sound silly to you or your friend when trying to read and describe your site? Describing pictures you use works OK. Telling the name of the links works OK. Saying "Rounded corner, asterisk (*), dash dash dash (---)" and so on does not. Think aloud, and you'll do fine.

Be the first to write a comment


Write comment

The only HTML accepted is <strong> and <em> - all other tags are stripped from the comment.


Title of comment: