Embedding MediaThe title attribute, on the other hand, will be displayed as a tooltip in most browsers, and that’s the more
correct place to include a description of the image’s contextual purpose, with the attribute acting as a
caption, legend, explanation, or indeed a title. When both alt and title are present, as in Listing 5-2,
even old versions of Internet Explorer will display the title text rather than the alt text.
Listing 5-2. An img element with descriptive alt and title attributes
<img src="images/mask.jpg" title="This heroine wears a domino mask (photo by Ben Hives)"
alt="A heroic woman with curly brown hair and black eye mask peers around a corner">
Even worse than writing improper alt text, some web designers omitted the alt attribute entirely, just to
avoid unwanted tooltips in Internet Explorer. An img element without an alt attribute, in addition to being
invalid HTML in most cases, is also inaccessible. A screen reader or text browser might simply state
“IMAGE” without any further information, or may read/display the file name from the src attribute. Omitting
the alt attribute could render an important image meaningless.
Informative alt text is especially critical when you use images in links or as buttons in forms. Such images
are functional, not merely informative. If an image features text that acts as a link phrase like “learn more”
(or a form button like “buy now”), you must make the link accessible by including the same phrase in an
alt attribute. If the image doesn’t show text and is the only content within the link or button (i.e., there’s no
other descriptive text), the image’s alt text should describe the purpose or destination of the link, or the
function of the button.
To demonstrate, Figure 5-7 shows a site’s navigation made up of linked images. A visitor with keen
eyesight (and who is able to download the images) can find her way around pretty well, and isn’t
concerned about alt attributes.
Figure 5-7. This site’s navigation consists of linked image buttons