Alternate Content

One area where there is a lot of confusion in accessibility is the use of alternate content. There are questions about where it belongs, what form it should take, and whether it is acceptable or not. I’ll be addressing a few of the basics here. We’re going to leave more advanced questions like what to do with multimedia content for a later entry.

Where to supply alternate content

Alternate content can take many forms but the ones you may be most familiar with are the alt attribute, the noscript tag, and the use of child elements in the object tag. The idea is that any time you put something in a page that may not show up in a browser you should try to supply an semantically equivalent alternative. Every image should have an alt attribute that is semantically meaningful. When using JavaScript to place content on a page, such as writing an e-mail address or the current date, use the noscript tag to convey comparable information if at all possible. An estimated 10% of users browse without JavaScript for some reason, losing 10% of your customers because they are unable to access some of your content is generally not acceptable. When using an object tag to embed a .swf or some other content you can include a child element that will only be shown to users who cannot view the intended content. In this way you can provide a comparable image or text that will assist users in finding the information or functionality they are missing.

What to put there

Simply put, if the image is meaningless, like a spacer gif or decorative swirl, use an empty alt attribute alt=””. For images that convey information, such as illustrations in a manual, use the text to convey the information rather than describe the colors or size of the image (unless those are informative rather than decorative). For noscript try to ensure that critical information and core functionality are still available to all users. For object tags this can be very difficult, if users are missing an RIA then the best you may be able to do is point them to any other online resources and perhaps a customer support phone number to assist them. In any case always try to include comparable information and functionality.

What is acceptable

At the bare minimum you should have a useful alt attribute for each image, noscript content for JavaScript, and a child element in object tags. In many cases it will become apparent that JavaScript or an image is being used where it is not needed. If the image is of text consider using text styled with CSS. If the JavaScript is being used for rollovers or to supply functionality that can be achieved using XHTML markup and CSS then consider removing the script entirely and with it the need for the noscript content. In those cases where you can not provide an informational equivalent in the alternate content provide a way to contact somebody for assistance and more information.

Basic alternate content is not that tricky or time consuming to provide, it just takes a little awareness and some testing. Always check out your site in a variety of old and new browsers and try using your site without various combinations of CSS, JavaScript, and Flash and see if you can still accomplish all of the user tasks and access all of the content.

Kevin Hall

I am one of the owners of Infinite Web Design. I'll be glad to talk with you about who we are, what we do, or any of the topics we write about here.
Kevin Hall