Chapter 5
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:
Australia
New Zealand
Papua New GuineaThis 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.