Embedding Media - HTML5 with CSS3 - page 147

Figure 5-5. Some browsers will display the alternative text if the image isn't available
An alt attribute should be a meaningful substitute for the image, so avoid unhelpful alt texts such as
“company logo.” Tell your visitors the name of the company, not just that your anonymous company has
some sort of logo they're unable to see. If you like, you can specify that the unseen image is, in fact, a logo
with alt text like “CorpCo, Inc. (logo)” or something similar. It still replaces the image as well as passing
on the extra information that it's a logo. If it's practical, you could even go one better and describe the logo:
“CorpCo, Inc. (logo: a yellow sunburst rising behind a blue inverted crescent representing the Earth, above
the company name in dark blue, in a heavy, slab-serif font)”. Images that are pictures of text (for
typographic style) should include that text in their alt attributes.
Many people use the incorrect term “alt tag” to refer to the alt attribute. This is
confusing and misleading because alt isn't a tag at all; it's an attribute of the img
element.
A well-written alt attribute might inform the reader that the absent image is a logo, a photograph, an
illustration, a portrait, a landscape, a thumbnail, a close-up, a chart, a map, and so on, but you should
avoid restating the obvious: “a picture of my cat” tells the reader what it's a picture of but doesn't tell them
much else about the scene that picture captures. The alt attribute is a descriptive or functional
replacement for the image, so you should try to describe the subject if possible, not just the image itself.
And you shouldn't use the image file name as the value of alt ; “mycat.jpg” tells the reader nothing
meaningful about the picture.
If your web page features a photo of your cat asleep in a grocery bag (as cats are oft wont to do), the
appropriate alt text might be “my cat in a bag” or “my gray cat sleeping in a brown paper bag” or even
“my gray striped tabby curled up and fast asleep in a brown paper Trader Joe's grocery bag on my red
Formica kitchen table.” These all describe the content of the picture to help your readers conjure the image
in their minds even if they can't see it on their screens.
The rule of thumb for writing alternative text: the content should still make sense if every image on the
page were replaced with its text alternative. Imagine reading the page aloud to a friend over the phone. If
the picture is important, describe the picture. If it represents an idea, state that idea in words, as briefly as
you can. If it's a graph or chart, list the data the chart conveys. And if the image isn't essential to
understanding the content, don't mention it at all.