Describing an Image with Text

Each <img /> tag in Listing 8.1 includes a short text message, such as alt="One of the Larger Fish Cruises for Dinner". The alt stands for alternate text because this message will appear in place of the image if a user turns off automatic image downloading in her web browser preferences. Everyone else will see the message you put in the alt attribute toobecause graphics files sometimes take a while to transfer over the Internet, most web browsers show the text on a page first with the alt messages in place of the graphics (as shown in Figure 8.2).

Figure 8.2. People will see the alt messages while waiting for the graphics to appear.

Even after the graphics replace the alt messages, the alt message typically appears in a little box (tool tip) whenever the mouse pointer passes over an image. The alt message also helps anyone who is visually impaired (or is using a voice-based interface to read the web page).

You must include a suitable alt attribute in every <img /> tag on your web pages, keeping in mind the variety of situations in which people might see that message. A very brief description of the image is usually best, but web page authors sometimes put short advertising messages or subtle humor in their alt messages. For small or unimportant images, it's tempting to omit the alt message altogether, but it is a required attribute of the <img /> tag. This doesn't mean your page won't display properly, but it does mean you'll be in violation of the latest XHTML standards. I recommend assigning an empty text message to alt if you absolutely don't need it (alt=""), which is sometimes the case with small or decorative images.

There is also a title attribute that is not required by the <img /> tag. The title attribute is similar to the alt attribute except that it does not enter the picture in regard to accessibility. However, the title attribute does supersede the alt attribute for tool tips if both attributes are present. Knowing this, the best approach for describing images via text is to use the alt attribute to store a brief text description of an image and then use the title attribute to provide any relevant notation or helpful hints about the image that you think might be useful when viewed as a tool tip.

Coffee Break

Speaking of text and images, you may not realize that you can search just for images on the Web using Google. Check out Google's Image Search service here: http://www.google.com/imghp?hl=en&tab=wi&q=. Strange URL aside, Google Image Search is a very powerful search tool that can come up with some interesting results. If nothing else, try searching for your name on thereyou may be surprised at what you find!