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 ...
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.