![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Everyone knows the old saw, "A picture is worth a thousand words", and recognizes how true it is - you can't, for example, convey the sheer majesty of the Grand Canyon in words alone; you've just got to show the picture - and even that doesn't do it justice, but...
The same is true on the web - you don't try to describe things in detail when you can put up a picture instead. And the Web makes it easy to put up pictures.
But the title of this article is not an error. And it's just as true as the original. Why?
Put simply, it's because pictures don't always work. You may have inadvertently chosen a format that the visitor's browser doesn't support (stick to GIF and JPEG, although PNG is probably safe as well), or traffic to your server may be so high that graphics are being throttled, or you may have screwed up the link. And what's going to happen? You're going to get a big blank with a little icon in it, saying "there's supposed to be a picture here, but I can't get it".
Or, what if your visitor is blind? Braille-based systems are most likely not going to handle pictures well. Neither will text-to-speech systems.
All this may not be a problem if the picture is simply to add interest, and doesn't itself convey crucial information to the visitor. But more and more, people are using images for things like navigation links and effects on informative text. And when those pictures are unavailable, the site becomes close to useless to the visitor, because most people seem to forget one little thing - the words that are worth the thousand pictures.
I speak here of the ALT attribute to the IMG tag. One silly little omission that can kill a site. And it's so easy to include, too. All you need to do is change
<IMG SRC="foo.gif">
to
<IMG SRC="foo.gif" ALT="This is a picture of a foo">
That's it. Now, when your server is throttling so that foo.gif isn't sent to the visitor's browser (or when you link to fpp.gif by accident, and don't realize it), they'll still know what's missing. You can put longer captions in there, too. But the most important use is when you're using graphics as navigation buttons. In that case, they become absolutely essential - otherwise, how will anyone know where they'll lead you - some browsers don't provide useful information about a URL in a status line, and even with those that do, the user may not be in the habit of checking. It's best to play it safe, and make the ALT text provide useful information about what the graphic button does.
The only time that ALT text isn't entirely useful is when you have an imagemap (click on different parts of the picture to go to different pages). In that case, treat it like a regular picture (i.e., give it a good descriptive ALT text), but make sure that you mention that it's an imagemap - and provide plain text links for each region that you've defined, so that your visitor isn't totally dead in the water when the image doesn't come up.
Short and sweet. But, oh, what a difference.
(When I originally wrote this, the HTML specification didn't require the ALT attribute, although it was strongly recommended. In HTML4 and XHTML, it's required. Even if you're writing to earlier HTML specs, use the ALT attribute anyway.)
The same is true on the web - you don't try to describe things in detail when you can put up a picture instead. And the Web makes it easy to put up pictures.
But the title of this article is not an error. And it's just as true as the original. Why?
Put simply, it's because pictures don't always work. You may have inadvertently chosen a format that the visitor's browser doesn't support (stick to GIF and JPEG, although PNG is probably safe as well), or traffic to your server may be so high that graphics are being throttled, or you may have screwed up the link. And what's going to happen? You're going to get a big blank with a little icon in it, saying "there's supposed to be a picture here, but I can't get it".
Or, what if your visitor is blind? Braille-based systems are most likely not going to handle pictures well. Neither will text-to-speech systems.
All this may not be a problem if the picture is simply to add interest, and doesn't itself convey crucial information to the visitor. But more and more, people are using images for things like navigation links and effects on informative text. And when those pictures are unavailable, the site becomes close to useless to the visitor, because most people seem to forget one little thing - the words that are worth the thousand pictures.
I speak here of the ALT attribute to the IMG tag. One silly little omission that can kill a site. And it's so easy to include, too. All you need to do is change
<IMG SRC="foo.gif">
to
<IMG SRC="foo.gif" ALT="This is a picture of a foo">
That's it. Now, when your server is throttling so that foo.gif isn't sent to the visitor's browser (or when you link to fpp.gif by accident, and don't realize it), they'll still know what's missing. You can put longer captions in there, too. But the most important use is when you're using graphics as navigation buttons. In that case, they become absolutely essential - otherwise, how will anyone know where they'll lead you - some browsers don't provide useful information about a URL in a status line, and even with those that do, the user may not be in the habit of checking. It's best to play it safe, and make the ALT text provide useful information about what the graphic button does.
The only time that ALT text isn't entirely useful is when you have an imagemap (click on different parts of the picture to go to different pages). In that case, treat it like a regular picture (i.e., give it a good descriptive ALT text), but make sure that you mention that it's an imagemap - and provide plain text links for each region that you've defined, so that your visitor isn't totally dead in the water when the image doesn't come up.
Short and sweet. But, oh, what a difference.
(When I originally wrote this, the HTML specification didn't require the ALT attribute, although it was strongly recommended. In HTML4 and XHTML, it's required. Even if you're writing to earlier HTML specs, use the ALT attribute anyway.)