HTML and CSS Reference
In-Depth Information
The
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
