The idea here is to provide that which is needed only to deliver the content in a smooth and natural way.
The proper use of the
alt attribute is perhaps one of the most misused, misunderstood, and most debated attributes. I’m not going to set out and try to change that or anyone’s thinking, but luckily I have permission from the owner to give you my hopefully comprehensive views and opinion, and that’s what I want to do, at least as it pertains to the use of the alt attribute on an accessible website.
What is the Alt Attribute?
Quite simply the “alt attribute” contains “alt text” and is associated with a specific embedded image. Its function is to provide a text alternative to the image should the image not be available. In order to appropriately apply alt text to this attribute, the embedded image needs to first be assessed.
When I encounter an image embedded in my markup I have to first ask myself what the image is showing and if what it’s showing is decorative, relative, descriptive, or definitive. I do an image assessment in other words in a effort to properly understand the image’s value. If you’ve never heard these terms used in this context, it’s because I made them up as I felt clarification is needed. Much of the confusion regarding the use of this attribute stems directly from not performing or understanding a proper image assessment, but these fit and will hopefully provide a rule-of-thumb guide.
- Decorative or style images are those used solely for decorative purposes. Most often, with today’s site-building methods, decorative images are backgrounds and not embedded images at all. In other words, using today’s web development methodologies, there should be next to no purely decorative images embedded in an HTML document.
- Relative or identifying images are those used for decorative purposes, but lend themselves well to the content or have some iconic function relative to said content. An example of this can be shown embedded and floated by my copyright statement. The image is a symbol relating to the copyright subject matter.
- Descriptive or Supporting images, help the content succeed, but aren’t necessarily critical to it. One example would be an image of a house next to a real estate listing. For sighted web visitors, this image lends some value.
- Definitive or Content images are the content. A good example of this would be a location map for a retail store.
I’m going to address these image types one-by-one, but first I need to tell you how I think about a web page in terms of how it will be used, and the mind set I have to develop to attain what I feel is the best result in the end. I don’t make sites specifically for screen reader users, that’s not even what accessibility is about, but when I think about the image alt attribute, it is that user group I empathize with the most as I feel alt text use has more impact on that group’s experience. For them the experience needs to be as natural and a smooth as possible. By doing this, using Reader Logic, I can apply certain rules associated to image type based on my assessment. It takes the guesswork right out of it and offers what I feel is a best practice. It sets a nice baseline from which to work. Keep it natural and try to hear it, and employ common-sense. Think value!
Special Note: To apply insights gleaned in this article later, it is suggested you download and install the Opera browser so you can use its “Voice” function. The browser is free, and the feature is simple to use. All you do is highlight text — or use CTRL+A to select the text, then type the letter “V” or right-click over any highlighted text and select “Speak.” Based on a few recordings I have heard, Opera emulates commercial screen readers extremely well, but do bear in mind that commercial readers have a multitude of settings, and many features may be disabled, but this is the choice of the experienced screen-reader user.
If you have a purely decorative image not being presented as a background, that image would be classified as decorative and should have no alt text. In other words the required alt attribute should have a null value:
alt="". It should not have a value of “Star,” “Foo,” or “Decorative Image.” And “Spacer Gif” isn’t acceptable either, and on more than one level in the latter case.
If you were to apply the alt text “Star” in this example, using “Reader Logic,” the paragraph above would read as: “Decorative Images. Star. If you have a purely decorative image blah, blah, blah […]” See the problem? Better yet, can you imagine hearing the problem? The word “Star” is out of place and has no relevance to the content.
Using an image of a copyright symbol as an example, we are provided with a relative image — assuming, of course — that the image is used in support of the text content. In this case we have to assume this example is being floated within a copyright statement. For the visual user, this supports the copyright text just fine. It may make the statement easier to locate on a given page. It’s like a decorative image, but it also makes a statement. That said, however, the recommendation stands fast: It should have no alt text. In other words the required alt attribute should have a null value:
alt="". It’s simply not needed. If you have built the page correctly, the alt text that would be used to support this image, “copyright,” will be available in the section’s heading.
If you were to apply the alt text “Copyright” in this example — assuming we are reading a real copyright statement — using “Reader Logic,” this paragraph would read as: “Copyright Statement. Copyright. The content of this site is blah, blah, blah […].” See the problem? Better yet, can you hear the problem? That second copyright isn’t needed at all. On some pages, this sort of thing can add up. It does nothing positive to enhance the experience.
But what if the image is used in lieu of the heading? As it is with nearly every rule, there can exist variables that dictate a change to said rule (or more accurately, in this case, variables that dictate an image reassessment, and thus the reclassification of the image. Reclassifying this image as “Definitive” would be the best way to go in this scenario). If this is the situation, please refer to the rules for Definitive Images.
Using the example I gave before, stating a Descriptive image could be used to support a real estate listing, that’s what I’ve provided. In this case, we see that the Brooklyn Bridge is for sale. Also note that the image contains the text “For Sale” and “Brooklyn Bridge.” This is an example, it could be a red house, a blue car, a pizza. Anything which gives a visual representation of the item the content offers. So do we use alt text in this case? Well, it would be justified and certainly allowable, but I will have to say no. I would suggest leaving the alt attribute empty. The reason is quite simple, but again you must use “Reader Logic.”
Ideally, the best practice in this situation would be to ensure the content in the image is also present in the text content itself. In this situation it’d be very simple to do. The heading, in fact, would probably state what the image contains: “For Sale. Brooklyn Bridge.” There is, however, more information in this image. We can see what the bridge looks like, and we can even discern what materials were used in its construction. Example of some text content that allows us to justify null alt text: “For Sale. Brooklyn Bridge. This property is a sturdy, well known construct fabricated of concrete and steel. It’s located in the heart of the New York City and blah, blah, blah […]. You’ve just read everything displayed within the image. And since you’ve probably given the image content as a heading followed by text, there is no longer any need at all to describe the image with alt text. If you did, you’d create a redundancy that could very well decrease site usability and make the content less readable to the reader group. Let’s use “Reader Logic” to flesh out the issue: “For Sale. Brooklyn Bridge. For Sale. Brooklyn Bridge. This property is a sturdy, well known construct fabricated of concrete and steel. It’s located in the heart of the city and blah, blah, blah[…].” See/hear the problem?
I know, I know, you’re probably getting antsy. You have all this alt text running around in your head and here I am suggesting that you not use it. I’m sorry. Really. But rest assured, your day has come. The Definitive image will need what you have. The definitive image is the content. In this case, the example I’ve provided is a location map with an overlay showing a route leading from the “Landmark Inc.” building to “My House.” This route shows that the traveler needs to go right on West Rd., then to turn right on Main St., then to hang a left on Maple. “My House” is shown on the right. In fact, this image is so involved, and the description so long, that a “Long Description,” or “LD,” is justified. It may, however, depend on the image area and how well the text will behave within the confines of the fixed image dimensions — remember to allow sufficient space for text enlargement. The long description looks like this in the image markup in addition to the alt attribute, with a relative or full path to the file, which can be a simple text file:
alt="" longdesc="mapdescription.txt". I included the alt attribute in this example and left its value null. I know, I said you could use some alt text. You will. I left the value null because it won’t contribute to the understanding of the content in the way I would use it. It would actually be placed into the Relative Images group. You are required to have a visible link to the long description. This can be displayed as simple “LD” link placed next1 to the image. In my case, though, I feel it’s more natural within the content. Natural being the key word in all of this. Written like this, for example: As a courtesy, we have provided Directions to our location. (Please note the title attribute used on this link.)
In the example of using an image as a headline as mentioned previously in this article, alt text must be used in the alt attribute and it needs to match the image heading text word for word. Also of great importance is that the image be embedded directly into the appropriate heading element so it is recognized as a proper heading.
- If the image is a link, and the “LD” link is located next to it, please remember to separate the two with something more than white space.
Okay alt text fans, here’s your big moment. Let’s now say the image is a link. Not a link to a long description, but rather to a map service website, or to a larger, more detailed view of the map. Most of your visitors will be sighted, after all, so either can be very helpful. In this case we do use the alt text and I would propose using the following: “Large Area Map Image - Click to View.” In this example, the entire phrase would be the link if the image wasn’t displayed. Perfect. It says exactly what we need it to say. I may also use the title attribute, and I would use it in a way that isn’t redundant, but complementary. If the target image is really large and detailed, the file may be large, so a good title might be the image file size. The alt covers the rest. For the sighted, and since a larger view is provided, you might add the alt words to the image itself (as shown in part). The long description would not be affected. You would use it exactly as noted above. Here is a real-world example shown on a site I recently built.
Linked images can lead to challenges. Should the title attribute be used or shouldn’t it? I feel it shouldn’t duplicate the alt text unless really helpful in some way to do so. If the information is that important, though, it should perhaps be handled by main text content. Opening in a new window, if applicable, could be the title, while the alt handles the link text. Not all browsers display alt text on hover, but to add a redundancy just to make that available so one can see the same text as the alt text if the link if the image isn’t available doesn’t seem very worthwhile. Using the same title text and the same alt text can lead to phases like this: Large Area Map Image - Click to View. Large Area Map Image - Click to View. Read twice just isn’t natural. Whereas Opens New Window (title text or “tool tip”) with Large Area Map Image - Click to View (alt text) sounds a whole lot better. It has better value.
Imagery Content Applications
Artist sites, photographic galleries, and image showcases… how do we deal we these? We can make assumptions about the audience being fully sighted. And this is probably perfectly justified. Offering alt text like Black and white photograph of a Grand Canyon natural arch could be used, but there is little point in doing this. While in this case it is true that the image is definitive, being that it is the content, we still have to consider value. Is there value in offering the alt text described above? Not really. In the definitive image map example, the map has meaning meant for any and all audiences. The image serves a purpose and has a role. Whereas the photograph in this example doesn’t serve an extended purpose and has no meaning outside of its own context. Its purpose is to simply be… to present itself to the sighted user. If these photographs aren’t links pointing to a large version, the alt text simply isn’t needed.
Does this mean it would be wrong to use alt text, or even long descriptions? No. Not wrong, and the usage of actual text within the content might increase the profile of the site on searches, so some good could come of it. Moreover, you might attract visitors you wouldn’t ordinarily attract if you provided something of “value” to them and word got out that you did. Maybe it’d be worthwhile to offer a description of the images, but then again, try reading the alt text content in a situation like this. Other content would also have to be added, I think, to make the flow more natural. To make it logical and not sleep-inducing. It could get quite involved just trying to satisfy an audience you’re likely not going to encounter. But what if you sell these photos? Ah hah, that might be another story. Will a non-sighted person buy a photo? Sure, why not; a gift, maybe, or a home decoration (not as far-fetched as it sounds). Will they seek these photos online on their own? Not likely. Someone may very well be with them providing their own descriptions of the images.
How about an artist’s site? Not just any artist, but one of those famous dead artists. A site with educational merit. Should alt text and/or long descriptions be used. I would have to say yes, in this case. Even though the site would be showcasing images of paintings, describing these paintings would be important. These painting have educational value and to retain that value, it must be equally shared. Imagine for a moment that you aren’t sighted and you’re screenreading a web page on a website about Vincent Van Gogh. On this page, let’s say the content speaks of his background, upbringing, career, etc. and also showcases some of his better known works. Since this site has some education/informative content, it becomes more that a mere showcase. If the images cannot be seen, I’d have to guess the value and understanding normally delivered visually, will still need to be delivered aurally to the non-sighted.
To reiterate this point once again, the idea here is to provide that which is needed only to deliver the content in a smooth and natural way. Anything beyond this may prove more of a hindrance that a help. It’s a matter of attaining the highest value without diluting that value with extraneous stuff. Using Image Assessment as a tool will help prevent the alt attribute from being used in a way that doesn’t provide additional value or in some way detracts from the value inherent in written content. And using Reader Logic will help it all make sense. Digest the page with your eyes to ensure your document has value, then digest the page with your ears to make sure you didn’t wash the value away or in some way obfuscate it.
Here is just a small sampling of sites that can provide additional information and further reading, as well as some important technical resources:
- W3C WCAG 1.0 Short Text Equivelents for Images
- W3C WCAG 1.0 Long Descriptions of Images
- GAWDS Writing Better Alt Text
- Dive Into Accessibility: Providing Text Equivalents for Images
- All That Malarkey: Accessible Alternatives
- 456 Berera Street: The Alt and Title Attributes
- Dive Into Mark: Providing Text Equivalents for Images
- Google: HTML Alt Attribute
- Google: HTML Alt Text
- Answers.com: Alt Attribute
- Answers.com: Alt Text
Disclaimer: Not all of my past works employed or optimized the techniques and logic discussed in this article. The reason is simple: like the rest of you, I continue to learn and grow in this field. What I didn’t apply in the past, will be applied in the future. Thanks in advance for cutting me slack if that’s what needs to happen in order to validate this content in your mind.
Disclaimer: Many of the links in this article are used for demostrative purposes only and may not be actual working links as may be indicated. Sorry if this causes/caused confusion.