Shortly after launching our new web site in June, I started receiving e-mails regarding the alternative text for several of the images on the site. Most of the e-mails went something like this, “I can’t believe that a reputable accessibility group like WebAIM could launch a site that has images with missing ALT text. Shame on you!”
First of all, I believe that every image on our site has and always has had the required alt attribute. The images in question were decorative images used on some of our second level pages – images that were given empty (or null) alt text. Because these images do not convey information that is central to the content of the page, but are only there for visual appeal, adding a description of the image to the alt attribute would be inappropriate. Some of the images people were writing about shouldn’t have alternative text because it would be redundant with content from the surrounding page. My photo on this page is an example. It has empty alternative text. Who would want to hear their screen reader read, “Jared Smith. Photo of Jared Smith” or something similar? The CONTENT of the image (that it’s me writing this article) is already conveyed in the page content. It’s clear that there is still some misunderstanding (or confusion) over what constitutes appropriate alternative text.
And I have recently seen some very divergent recommendations, even from accessibility experts, as to the proper implementation of alternative text. Alternative text for images is the first principle of web accessibility. Despite this, there seem to be examples of improper alt text all over the web, even on sites that claim to be very accessible. Even our own site has some poor examples. That’s we we have written an article offering some best practices in creating alternative text.
This article presents the basics of alternative text and showcases many examples of proper implementation. These recommendations come from our understanding of accessibility standards and screen-reader users. I know that some folks may have differing opinions regarding these techniques and I’d be happy to see your comments on how and why you would do things differently.
Greatly enjoyed the article – very well written like all your stuff. The examples are clear and do a good job of raising the issues involved in making decisions on alternative text. Not sure I always agree with your conclusions though.
In example 1, I would use null alt text. You say this “is not appropriate because the image conveys content that is not directly presented in the surrounding context”. But what content does the image convey? And how does your suggested text “Gorge Washington” convey that content?
I like to think of alternative text by asking the question “What relevant information is the reader missing by not seeing this image?”. The alternative text should then attempt to provide that information.
In example 1, hearing or seeing the text “George Washington” provides the reader with no information at all, surely. Practically speaking, if I’m reading the text of the page and I hear “George Washington. Because of his role … Father of his Country”, the initial “George Washington” at the beginning gives me no extra information. So what good is it?
Example 3 is interesting. You recommend the alt text “Wikipedia entry for George Washington”. But the reader is not missing that information by not seeing the image. The reader is missing that information anyway, whether they can see the image or not. Therefore, the alt text is not replacing the missing image but doing something extra. Whilst this is not in itself a terrible thing, it shows that there is a problem with the link, in that it is not clear that it goes to a Wikipedia entry. Fixing this problem only in the alt text discriminates against readers who do not see the alt text but rely on the image and its surrounding text.
Lastly, example 9 brings up an interesting point about what information an image contains. A picture is worth a thousand words they say, and I’m sure that most marketing people would say the handshake image says a lot. It says “we are trusted”, “you can do a deal with us”. Would it not then be appropriate to use an alt attribute like “we are trusted”, since, arguably, that information is provided by the image and is therefore not available to people who cannot see the image?
Interesting how the seemingly simplest accessibility issue is so complex in reality.
I like your alt text article. Nicely done. One comment: I think the examples that you give in which you say alt=”” is sufficient should explain that alt=”” is more of a hack and that the “real” solution is to put the image in the background using CSS.
Mark-
Thanks for the great comments. They are all valid. I’ll just add my thoughts on them.
What if the image were contained in a header? Would it not then be appropriate? And what if the words “George Washington” weren’t used in the text that follows? All if’s, but I think that alerting the user at the beginning about the contents that follow (i.e. this is the beginning of stuff about George) is essentially what the image is doing. To me, that’s important enough content to warrant the alt text.
Actually every major visual browser I’ve used provides the status bar which displays the URL of the link. Granted, this is not exactly the same. But what would the alternatives be? “George Washington” is not informative enough. “More about George Washington” is essentially the same as saying “Wikipedia entry for George Washington”. I could have added a caption of, “Click the image for the Geoge Washington Wikipedia entry”, but then why not just make the text the link and not the image. This was intentionally a bit of a bad design to force the thoughts of appropriate alt text, not debate if there’s a better way to provide the same functionality.
Perhaps it would warrant alt text in some instances. But there are a million images VERY similar to it which would not. If you could Google just alt text, you probably find loads of these values – “A computer”, “A businessman looking at a laptop”, “Gears”, “Lightbulb”, “Smiling woman”, “CD-ROM”, etc., all of which convey nothing of value.
Indeed. And talking about it helps us come to a better understanding. It’s interesting that accessibility talk so much about the necessity of alt text, yet don’t adequately descripte what “appropriate” and “equivalent” actually are.
Great suggestion. I have added this information to the article.
However, it is often not as straightforward as adding a background image to some element. Often there is not an existing element in place to which the background can be associated, especially when the image appears within or floated by body text.
As a result, you must add another page element (typically an empty <div>) and add styling information either inline, locally, or in an external style sheet. In many cases, the overhead and semantic corruption of your content of this approach might be worse than just having an image in the content.
Of course, if HTML/CSS standards allowed background images to be placed outside of the constraints of an element and if they allowed multiple background images, then much of this would be a non-issue.
The article is really very good and helpful too.
I have one question about use of alt=”” in case of a person’s photograph(example 2)
For screen reader users it’s ok to have null alt text but would it work for sighted users having image turned off browser?
Screen readers are smart enough to skip images with empty alt text but sighted users will have to see empty blocks. Which they may not want to.
Even if they are not missing any information in such a case they can argue “ it doesn’t look good to have empty squares ”
If alt=”George Washington” is used then at list the empty space will be filled and user will not feel annoyed.
Pls correct if I am wrong; I am very new to accessibility space.
Thanks
Shrirang-
That is a valid point, but I think the disadvantages of having the redundant text would outweigh the advantage it might give to sighted users who would see text in place of the image. The browsers SHOULD display absolutely nothing in place of an image with empty alt text. They should not display any empty space for them when images are disabled.