Alt-er Ego: Images and Alt Attributes

I was recently reading an article on Sitepoint.com about SEO mistakes and, in the comments to this article was an interesting discussion on the correct usage of the misnamed "alt tag." This inspired me to pen my own thoughts on the use of alt on accessible web sites.

Well, first things first, as another blogger points out, there is no such thing as an "alt tag", alt is an attribute of an img tag. As such, I shall (try to) refer to it as an attribute rather than a tag.

Before we can really discuss correct usage of the alt attribute, we need to discover what purpose this attribute is intended to serve. The W3 Web Content Accessibility Guidelines (WCAG) describe the purpose of the alt attribute as providing a "short text equivalent" of the image. The WCAG also states "[t] equivalents must be written so that they convey all essential content."

This is still a tad vague and elsewhere the alt attribute is described as being used to specify the purpose of the image or "to provide in textual form whatever information was provided by the image."

W3 also offers some guidelines on the correct usage of the alt attribute:

1. The alt attribute is required for all images, even if it is left as an empty string ("")
2. Users should not "specify irrelevant alternate text when including images intended to format a page" (which should be indicated by an empty string).
3. The alternate text must be meaningful.

It's also important to remember that correct HTML markup provides two other attributes that are often confused with the alt attribute, the longdesc and title attributes and the alt attribute should not be used instead of these.

Another incorrect usage of the alt attribute, which is seen on many web sites, is using it as a tooltip. The text in the alt attribute must never contain information that is additional to that conveyed by the image. In fact, browsers are not even "required" to display the alt text as a tooltip at all and some popular browsers, such as Firefox, do not do so.

Purpose of the Alt Attribute

Before I examine the correct usage of the alt attribute, it's also important to recognize that there is some disagreement as to its fundamental purpose.

As stated above, its purpose is to provide a text equivalent, but an equivalent for whom? Many people concentrate on this attribute solely as a means of providing information to visually handicapped users who cannot see the image being displayed. However, this attribute is not there just for those with visual handicaps but is also intended to be used for anyone whose web software does not display images. Thus, it is also for users of text-only browsers, screen readers, and so on.

Sometimes the accessibilty needs for visually handicapped users needs to be balanced against the needs of other users. However, in my personal opinion, in the real world, the vast majority of web sites are browsed by sighted users using standard web browsers and the only people that would gain any real benefit from well-formed alt attributes are visually handicapped users. In fact, alt attributes serve no purpose whatsoever for sighted users using standard web browsers (IE, Firefox, Safari, Opera, etc.) and they are not meant to!

Thus, my discussion of the correct usage of this attribute will have a definite bias towards straightforward accessibility for users with visual handicaps.

Correct Usage of the Alt Attribute

I'm going to start off with a bold and possibly controversial statement: in most cases, unless the image is both functional AND contains text within the image, the alt attribute may serve no purpose at all.

So, let's examine that statement in the light of a few scenarios.

Supposing you have a web page containing an image that is merely illustrative of the surrounding text. For example, a web page about yourself, containing a head and shoulders photo of yourself . . . or a page about San Francisco containing an image of the Golden Gate Bridge. In such instances, the images only really serve a purpose for sighted users. Does a blind user gain anything from knowing there's a picture of yourself, or the Golden Gate Bridge on the page? In my opinion, the answer to that question is a clear "No" - even if the user had, at one time, seen either yourself and/or the Bridge. What use does it serve the typical user with a visual handicap to have "picture of Golden Gate Bridge" or "Golden Gate Bridge" read out by their screen reader, or transformed into braille, or whatever? In fact, it may even interrupt the flow of text such that it actually causes confusion.?

On the other hand, what if your navigation bar uses images containing text such as "About Us," "Contact Us," etc. linking to the relevant pages. In this instance, unless those images contain alt text, fundamental functionality of your site will be lost to anyone that cannot, for whatever reason, see those images. So, here you clearly need to have alt attributes that describe the purpose of those images and that contain the same information as those images, as discussed above.

This is in clear contradistinction to the self-photo or Golden Gate Bridge examples. The head and shoulders photo really just serves the purpose of giving a sighted user a visual cue as to your appearance. The GGB shot, on the other hand, probably only serves the purpose of breaking up the monotony of the text on the page or to provide a more pleasing visual layout. Thus, in both cases the purpose is primarily visual and serves no other function.

Conclusion

1. You must have an alt attribute for all of your images, even if it's empty
2. Alt attributes must not contain information additional to that in the image itself
3. Alt attributes are really only useful if the image is both functional and textual

Technorati Tags:
alt tag, html, accessibility