Alternate Text

Many people set their browser so that it won't load any images when it retrieves a web page. This means they don't have to wait for images to download. Also, blind people who are using the web cannot see the images. You can add a “caption” to your images for the convenience of these users. These captions are officially referred to as alternate text, and you add it via the alt attribute and the title attribute in the <img> element.

The alternate text will be read by text-to-speech converters, and, in the latest browsers, the title will appear as a tooltip when you hover over the image.

Here is a picture of Tabitha, the cat.
<img src="tabitha.jpg" alt="Picture of cat"
   title="Picture of cat" /> 

While the code above is perfectly good HTML, the alt text is worse than useless, as it adds nothing new to the text; you already knew it was a picture of a cat!

Slightly better is this alt text, which is what you will often see inserted automatically by programs such as Front Page:

Here is a picture of Tabitha, the cat.
<img src="tabitha.jpg"
   alt="tabitha.jpg (5122 bytes)" /> 

This is a minor improvement, as you now have an idea how long the picture will take to download if you decide to view it–but you still have no idea what the cat looks like!

To add alt text intelligently, answer this question: How do I describe the most important part of the image to someone who can't see it? Answering this question for the example above, we can come up with this useful alternate text:

Here is a picture of Tabitha, the cat.
<img src="tabitha.jpg" alt="Black domestic shorthair" 
   title="Black domestic shorthair" /> 

Note: if you're writing XHTML, the alt attribute isn't just a good idea; it's required for a document to be valid.