HTML and CSS —

Providing Alternative Text

Some people surf the Web without images turned on. Sounds strange in today's world of high bandwidth, but some people still don't have high-speed access, so images can slow down their access to your page's content, and they will disable the images. Another important concern is that many people visiting the Web are visually impaired or blind. In all these cases, it's helpful to provide some clues to your visitor as to what the image represents.

This is done using alternative text, which uses the alt attribute and a description, as shown in Example 3-2.

Example 3-2. Adding an alt text description
<img src="photo.jpg" width="250" height="188" alt="photograph of a delicious Vietnamese
 noodle dish from restaurant Pho 88" />

Alternative text descriptions appear in two ways on the site. First, they appear in the location of the image before the image load and when images are disabled (see Figure 3-4).

Figure 3-4. Alternative text in a browser where images are disabled.

The second way alternative text appears is upon mouseover of an image. This assists everyone because it provides more contextual clues on the image's purpose (see Figure 3-5).

Figure 3-5. Alternative text in a ToolTip as the mouse passes over the image.