Web Design in a Nutshell, 3rd Edition

Alternative text

There is no guarantee that an image will be displayed. It may be corrupted or not found, or users may be using a text-only or speech browser that doesn’t support images. When an image is not displayed, graphical browsers display a generic broken image icon in its place. Non-graphical browsers generally just write out “[image].” Either of these instances can be a dead end for users and make certain content inaccessible.

The alt attribute allows you to specify a string of alternative text to be displayed in place of the image when the image is unavailable. It is also what non-graphical browsers write in place of images. Figure 12-2 shows one possible rendering for this markup if the image file should fail to load.

<p>First star <img src="star2.gif"alt="star illustration" /> I see tonight.
</p>

Figure 12-2. Alternative text may be displayed when an image is unavailable

Firefox and Safari will only display the alternate text if the graphic is sized large enough for the text to display. Therefore, text in small graphics or large amounts of alt text may not display in the browser. Some browsers display alternate text as a pop-up “tool-tip” when the mouse rests on the image area, but such behavior is non-standard and not dependable.

The HTML 4.01 specification declared alt to be a required attribute within the img element (although an image will still display without it). Taking ...