Context is the most critical aspect of alt-text everyone seems to miss
Twenty-two months ago, when I started this blog, I swore I would never write an article about alt-text or headings because I thought those topics had been written about to death. However, every article I read on these two topics (yes, I read other people’s accessibility articles) leaves out part of the story that *I* think is incredibly important. So here we go, Sheri’s take on alt-text. Sheri’s take on headings is will come in a couple of weeks.
What is an appropriate description for this image?
The two most popular explanations for alt-text are as follows:
Alt-text is presented as a polar opposite. You either need it or you don't.
Alt-text is presented as an absolute. You always need it.
Both approaches are wrong. Here’s why.
Appropriate alt-text is one of the most basic questions in all of accessibility. Alt-text (named for the place in HTML where image descriptions get stored) is frequently one of the first aspects of accessibility that designers and developers are exposed to. Unfortunately, many people think alt-text — or sometimes alt-text and colors — are the ONLY thing you have to pay attention to be accessible. But that is a topic for another article.
When people ask me about good documentation on how to write alt-text, I frequently send them to two places:
But, as good as these resources are, they don’t spend a significant amount of time on how much description of the image is the correct amount of description.
Consider the image at the top of this article. Is the appropriate alt-text:
Dog on beach
Dog wearing sunglasses on the beach
Dog wearing sunglasses sitting in a hammock on the beach
Jack Russell terrier wearing sunglasses sitting in a hammock on the beach
Charlie, the Jack Russell terrier wearing sunglasses sitting in a hammock on the beach
Charlie, the AKC’s all-time winningest Jack Russell terrier, wearing sunglasses sitting in a hammock on the beach
Charlie, the American Kennel Club’s all-time winningest Jack Russell terrier, wearing sunglasses sitting in a hammock on the beach
No alt-text, the picture is only there to be pretty.
For option #8, in the code, this requires setting alt-text= “. You can’t just ignore it, it must be set to NULL. The empty quotes are called a NULL in coding-speak. Setting the alt-text to NULL instructs the screen reader to skip over the graphic and pretend it isn’t there. You do this when the graphic is decorative, which is WCAG-speak for the fact that the image does not convey any new information to the screen reader user. For this statement to be true, one of the following must also be true:
the image is completely irrelevant, and/or;
the user can get the exact information in the image from the surrounding text, making the image redundant. Redundant imagery happens a lot in progress bars, for example. If you can tell elsewhere that the process is 55 % complete, you don’t need to write all the complicated code announcing each time the progress bar updates (which users find annoying, anyway). Food menus, where there is a picture of food followed by text describing the food frequently make the image redundant as well.
I’ve picked my answer, tell me if it is right.
Trick question, the answer is any of these eight alt-text descriptions could be legit, depending on how the image is being used. Let’s look at them one by one.
Dog on the beach — ok, but probably not the best choice. If this little information was required, it is probably just there to be pretty (see #8 above for what to do with images that are decorative).
Dog wearing sunglasses on the beach — maybe. Is it essential that the sunglasses get called out? Perhaps it is an article on sunglasses or beach accessories, or it is an attempt to inject humor somehow into an article unrelated to dogs and sunglasses. In those cases, it is absolutely appropriate to highlight that the dog is wearing sunglasses.
Dog wearing sunglasses sitting in a hammock on the beach — again, maybe, for the exact same reasons above. Is it essential that the hammock be identified? Is the article on training animals, for example, or on how animals provide unconditional love? Then the presence of the dog in the hammock might be relevant.
Jack Russell terrier wearing sunglasses sitting in a hammock on the beach — Absolutely if the article is about dogs or Jack Russell terriers. Then, breed identity matters. It is an essential fact that screen reader users will not otherwise know unless you mention it in the alt-text.
Charlie, the Jack Russell terrier wearing sunglasses sitting in a hammock on the beach. Maybe, if it is an article specifically about Charlie or trying to make dogs more individualized (possibly to encourage dog adoption, for example).
Charlie, the AKC’s all-time winningest Jack Russell terrier wearing sunglasses sitting in a hammock on the beach. Again if it is an article about dogs or Charlie in specific and this information is not conveyed in the text of the article this would be important information. The only drawback to this alt-text is how some screen readers will try to pronounce “AKC’s” as a word, which will not come out in any understandable sense. Then the screen reader user will have to switch to letter-by-letter pronunciation and then switch back, which is slow and annoying. If you need to use abbreviations in alt-text and you want every screen reader to get it right, put spaces between the letters like this “A K C”. Also, only abbreviate when it is a well-known abbreviation. Q P W C for example is not a well-known abbreviation even if the letters are spelled out individually.
Charlie, the American Kennel Club’s all-time winningest Jack Russell terrier wearing sunglasses sitting in a hammock on the beach. A better version of #6.
No alt-text, it’s just there to be pretty, or the image is irrelevant or redundant. This is a totally legit choice if one of those things is true.
These eight are not intended to be the only alt-text possibilities. The point is that what is the right amount of alt-text is just as important of a question as whether you need alt-text at all. Both questions require some thought, it’s not an automatic yes/no.
Two identical images can have different alt-text approaches depending on the context.
This is something that is not really well understood among content managers and strategists. I’ve repeatedly heard people say, “If it’s the same image, it should have the same alt-text.” Surprise, that’s wrong. Here’s why.
Take this image of a head of lettuce.
When it is used as a background image on a menu, it is not conveying any information, and you can choose to set the alt-text to NULL.
When the exact same picture is used to identify a menu choice as vegetarian, it IS conveying information, and you cannot set the alt-text to null. Under these conditions, the image of the head of lettuce is effectively being used as a skeuomorphic icon. The appropriate alt-text for this context would be “vegetarian” (the intent of the info being conveyed) and not “head of lettuce,” which would be the literal description.
Sheri’s rules of alt text are as follows:
Decide whether or not the image needs alt-text. Most of the time you do, but if you don’t, don’t force your users to listen to descriptions that are unnecessary.
When you do need alt-text, use the shortest amount of text possible to convey the appropriate level of information for the context.
Avoid using punctuation. !!! announces as “exclamation point exclamation point exclamation point.” You can see how that can get annoying and slow things down for screen reader users. Warning: leaving out punctuation may cause your grammar checker to barf. You might want to turn it off if you are keeping your alt-text in an MS Word doc (or use Excel instead, which is what I do).
Avoid using abbreviations unless you treat them with care and consider how well they are known to your readers.
Avoid using articles like the, an, a, “one of,” etc. They don’t add value to the reader. Again, grammar checkers don’t like this approach, be forewarned.
The common denominators to all of Sheri’s rules of alt-text are this:
It takes three times as long for a screen reader to announce a page (at an average rate of speaking) as it does for a sighted reader to read a page visually (at an average rate of visual reading). That’s one of the reasons people who are experienced screen reader users crank their speech rate up to unintelligible rates— to try and overcome the time deficit inherently created by needing visual information conveyed in an entirely sound format.
Anything that you can do to trim irrelevant and unnecessary information including punctuation and articles out of alt-text without losing important details will make your screen reader users happier.
Adding this consideration to your alt-text process will make your website, product, or documentation not only accessible but usable as well.
