The Alt and Accessibility

Posted February 11th, 2006 by Mike Cherim

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.

Image Assessment

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.

Reader Logic

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.

Image Types

Decorative Images

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.

Relative Images

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.

Descriptive 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?

Definitive Images

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 next¹ 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.

Tough Decisions

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.

Summary

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.

10 Responses to: “The Alt and Accessibility”

Joshua Kendall responds:
Posted: February 11th, 2006 at 3:25 pm →

Interesting read, I was under the impression that if you have an image embeded in the HTML then it needs to have a alt attribute and that it was wrong to use alt="".

This has been helpful, although I think I will stick with giving my images alt attributes.
Mike Cherim responds:
Posted: February 11th, 2006 at 5:35 pm →

Yes, Joshua, you have to continue giving your embedded images the alt attribute. That is required with the XHTML Strict Document Type you write your pages to typically. It is the alt text I suggest omitting in most cases for the reasons I gave in the article.
Joshua Kendall responds:
Posted: February 11th, 2006 at 7:51 pm →

Well, when I said alt attributes I meant giving them alt text as well.
JackP responds:
Posted: February 11th, 2006 at 8:07 pm →

Joshua, Mike’s right. Undesirable alt text is almost as much of a problem as missing alt text. The key is always “if I couldn’t see the page, what information would I want read out to me?”. If the image adds no meaning, add nothing.

I don’t necessarily agree with the “for sale:brooklyn bridge” one however. If you’re selling something, then just because some features are described in the text, other features (e.g. physical condition of a building’s brickwork) may be visible on the picture and not included in the text. I’m not suggesting you need to describe everything to the nth degree, but if you DO indicate that it’s a meaningful image (a picture of the building in question), then a visually impaired user might wish to refer one of their friends to it. If you tell them it’s a purely decorative image, you remove this option.

But avoid going overboard, because you need to always remember “if I’m going to hear the text anyway, what of this alt text would I want read out?”.
Neal V. responds:
Posted: February 13th, 2006 at 9:56 am →

Nice work, Mike. But, I wonder, what would a Logo fall under? A relative image or a decorative image? I think it’s a relative image, and as such should be included in the markup, but others say it is decorative and belongs in the CSS? What are your thoughts?
Mike Cherim responds:
Posted: February 13th, 2006 at 10:50 am →

@ Jack: Good point you have there.

@ Neal: I think a logo, which would be a relative image I’d say, could be used as an embedded image or as a background in the CSS. The latter similar to the way I have quotation mark imagery as a blockquote background.

However, if the logo image will be used to convey important info like the company’s name, it could be used as a background if the text it was replacing was available when images aren’t supported. My banner is an example.

Using it as an embedded image would be fine too, with the proper alt text and with the applicable heading or styling (the latter is purely my opinion). Some people are okay with putting the company name or the site name in the h1 heading at the top of a page while others do not and feel it’s a waste of the heading. Neither is “wrong” in my eyes, per se. I can see both points. What I do like to see, if it’s not being put to page as a proper heading, is to at least style it in a way which compliments the page and importance of the text if images aren’t supported while CSS is. Styling it big and bold for example, regardless of real heading status.

In any case, I can say with confidence, that the word “logo” should never enter the picture.
Robert Wellock responds:
Posted: February 13th, 2006 at 3:09 pm →

If it’s used as a background then it must be purely decorative anyway.
Mike Cherim responds:
Posted: February 13th, 2006 at 3:51 pm →

If it’s used as a background then it must be purely decorative anyway.
Robert Wellock

Robert, is there some authority supporting your absolute statement? If not, meaning no disrespect, I have to wonder if it is accurate. The reason being, I can’t help but think of image-based navigation, banners, and such. These items certainly have value, even if they are backgrounds using image replacement techniques. But then again it could be argued that these backgrounds actually have text at the ready, it’s just not visible. But then again, so do embedded images using the alt attribute, only seen if read or if images are turned off.

So, in my opinion, we cannot say absolutely that background images can only be used for decoration. The way to handle these images, would thus fall in with other images in that they should be assessed first, before applying rules.
Robert Wellock responds:
Posted: February 14th, 2006 at 8:31 am →

I was obviously referring to the ‘CSS background-image: method’, etc. if it lead to any confusion?

Try disabling all the CSS, turn-off images and if the image object itself still makes sense via ‘alternative fallback text’ then its not decorative; most image replacement techniques are just ersatz.

Thus currently we have the option of IMG or OBJECT in HTML otherwise it is just effectively decoration. I didn’t say they cannot be used for ‘conveying information’ I said it must be ‘purely decorative’, which is a certain reality and it cannot really be disputed otherwise.

That doesn’t mean you cannot use it as a mask or substitute to enhance the presentation, or decide to label it something-else, we both agree upon that, etc.
Mike Cherim responds:
Posted: February 14th, 2006 at 10:34 am →

I wasn’t confused. I knew “CSS” background image, but I don’t think that makes any difference as a background image is a background image, regardless of building technique.

Reading what you wrote, it sounds as if you agree with what I’m saying. That being, post assessment, if the image is definitive, it must be backed up with text. You are merely describing an assessment method.

And I agree with that. But I also feel a definitive image can just as well be done with a background, provided the developers provide the text. This can be done with a background via an image replacement technique. If it’s not a background, then alt text must be used.

A halfway decent example of this can be found on my main site’s pages: The banner is a background. If you turn off CSS, you get the text, “Green-Beast.com” (with byline as title text), now turn images back on and turn CSS off. Doing this you’ll see an image banner still, now embedded (this is the “focus” banner — this is my method of pre-loading the image for dial-up users). Now, with CSS off, turn off images, and you still get the banner text, title this time (as alt text).

I said that is was a halfway decent example — this site was built a while ago and I’m always learning and refining my techniques. A much better example can be seen on my most recent site, which also has the pre-loaded and embedded banner, but it has no alt text because all the text is available anyway so there was no point in creating a redundancy. Other parts of that site only use alt text on images that really need it. I literally closed my eyes and listened to the pages being read.

Anyway, the point of this is to not overuse the use alt text (or image replacement) on images that don’t truly need it — by way of image assessment — in consideration to those using screen readers — Reader Logic. Images that say something that shouldn’t be missed, and are presented in a logical order, are beneficial to that group. And since they don’t really have a bearing on the usability of other user groups (though this is important to text-only browsers as well), I suggest not using the alt attribute on those images. It just leads to unnecessary aural clutter.

Sorry. Comments are closed.

Beast-Blog.com
The Alt and Accessibility