HTML and CSS Reference
In-Depth Information
Inline images that aren't essential content—meaning they're just for show and may enhance other content,
but aren't informative content themselves—still need
alt
attributes. But rather than describing their
ornamental function, including an empty
alt
attribute (
alt=""
) will “hide” those nonessential graphics; it's
as if the image doesn't exist at all if its description is blank. An empty
alt
attribute effectively declares that
this image isn't vital to the page, so the reader needn't worry about understanding it (screen reading
software will also ignore it). For example, you might show a flag icon next to a country's name:
<li><img src="/flags/australia.png"
alt=""
> Australia</li>
<li><img src="/flags/newzealand.png"
alt=""
> New Zealand</li>
<li><img src="/flags/papuanewguinea.png"
alt=""
> Papua New Guinea</li>
This would be appropriate in a list of countries where the names are the important part and the flags just
enhance it. If this list were a gallery of international flags, on the other hand, the flag images would be
essential content and each one should carry an
alt
attribute describing the flag's design.
For purely decorative, presentational images, you should use CSS to display them on the page as a
background attached to some meaningful element, as you'll see later in this chapter.
For many years, Internet Explorer for Windows, the most common browser on the most common operating
system on Earth, inexplicably displayed the contents of an
alt
attribute as a tooltip, a small text bubble
that appears when the user's mouse lingers over the image (shown in Figure 5-6).
Figure 5-6.
Older versions of IE improperly displayed the value of the
alt
attribute as a tooltip
Because of this, many web designers in years past misused the
alt
attribute to inject the kind of
supplemental information they wanted to appear in a tooltip: “this is my favorite picture” or “my cat's name
is Neena.” Such supplemental information doesn't necessarily describe the image or take its place, so it's
probably not a proper value for
alt
. Later versions of IE, starting with version 8, have at last corrected this
misbehavior and no longer show
alt
text in tooltips.