Improving Your Web Site's Accessibility

So, you followed the WAI guidelines from the W3C found at http://www.w3.org/wai and you hope your site is accessible to visially impaired visitors. Let's talk about some of the most elementary and easiest to understand aspects of a site that contribute to accessibility to users of assistive technology.

Be Explicit
Label Graphics and Images
First, did you label everything on your web site that isn't strictly text? In most cases, this means using alternative text to describe the function of the item. In HTML, you can provide alternative text for images by adding alt="your description of the image" within the image tag.

Pictures are probably there for a reason. Certainly, graphical links have a purpose. Image maps need to have alt-text for each "clickable" region. And, be sure to use client-side image maps, not server-side, or you'll have even bigger problems.

To see what happens to a web page when you forget to label everything, first tell your browser not to display images.Now, when you go to a site you haven't visited recently, instead of pictures, you'll get the alt-text for each image. Alt-text, what alt-text? If everything on your web page is tagged correctly, you'll see words describing the image in the space where the picture was supposed to be. So, if you have your company logo at the top of the page, you'll see "Acme Dynamite Logo" or something appropriate in its space. Image maps will appear as a series of meaningful words. Since you've labeled your page correctly, go to another one to see what it looks like when important page elements have not been labeled. Try CDNow's web site to see the problem. http://www.cdnow.com

In the top left corner, what was the picture put there for? We'll never know. In fact, all of the navigation buttons are now a complete mystery. This means that a blind person using a screen reader won't have heard anything meaningful, because there is no alternative text to convey.

Tips for Writing Effective Alt-Text
Now you're going back to label those few problematic images on your site. How do you know what to write? Of course, the description of an image is just as subjective a matter as the image itself, but a few suggestions will help.

* Describe the function of the image. Especially if the image is a link, "Search the Card Catalog" is much more useful than "Photo of a collection of books and other reading materials scattered on a library table."

* Brief is better. Remember, syllables are time.

* Put the most essential information first. If it is necessary to use a number of words, use "Acme Logo: Sun rising over white sand dunes" rather than "Sun rising over white sand dunes: Acme Logo"

* Meaningless graphics need not have meaningful text. If a graphic is being used as a spacer, to push other graphics into position, don't label the thing "Green spacer." Instead, put a space between the quotes of the alt-text so users don't have their train of thought disrupted by such irrelevant information. Use this "non-text" judiciously, though. If you can't think of something to say about an image, that doesn't mean it's meaningless.

* Maintain the alt-text. If your image map is rearranged so that the last item is now "Contact Us," don't forget to move the alt-text, too. Otherwise, that image will still be labeled as "Site Map" and users will be lost.

* Alt-text reflects your professionalism just as much as your choice of images. Spell words correctly. If you don't, they will be mispronounced.

Label the Structure
Graphics aren't the only things you need to label. Your page probably has a "structure." You may not even have thought about it. Somehow, users know that the links at the top are part of the navigation bar, the text down the left is headlines and "What's New" items, and the paragraphs on the right are part of a press release. How do they know these things? You've probably used different fonts for the parts of the page, perhaps made the navigation bar a brighter color than the press release, and may have placed a shaded box around the "What's New" items to set them off. You probably spent a lot of time deciding what colors to use and just how to get the ideas across.

These sections of your page need to be labeled explicitly so that users who can access only parts of it at a time will know when they've moved from one part to another.

Many structures in HTML have provisions for labeling. Frames, for example, have a "name" element for just this purpose. The name doesn't show on the screen, but can be read by modern assistive technology.

It's possible, even easy, to label regions of the screen where HTML doesn't provide a formal mechanism for doing so. For example, you may have a "section" of things you consider to be new items, followed by another section which includes links to the more mundane items on your web site. You may have colored them differently, or placed them side by side with lots of empty space in between. Visually, they are obviously two different regions, and it may even be obvious that the items in one section are related to each other. In order to convey these relationships, a text label at the beginning might do the trick. So, right before the list of new items, you might put "Section 1: New at Acme."

Some might consider these text labels unappealing visually. If you think they disrupt the visual layout you've struggled so hard to achieve, you can use the common trick of placing a border or other unobtrusive (or invisible ) graphic before the section in question, then labeling the border "Section 1: New at Acme."
Labeling Links

If a graphic is a link, it absolutely must be labeled meaningfully. But, text links must make sense, too. Many visitors to your site will read only the links, skipping over explanatory text. Others will not be able to see the relationship between the explanation and the link—particularly if they are using a screen reader and tabbing from link to link. So,

For the latest version of our software, <a href="/finest/download.html">click here.</a>

is bad. Many people will hear only "click here" and will have no idea which way to go to find the explanation.

<a href="/finest/download.html">For the latest version of our software, click here.</a>

is much better.

Java, Javascript, and other non-HTML Elements
If your web site cannot serve its purpose without these things, you must consider what will happen to users who do not have access to these parts of the page or site. These include users of older browsers. Remember, when we say "older" on the Internet, we mean six months to a year old. Call your mother and see when she last updated her browser. Will she be impressed by your handiwork?

Users of assistive technology such as screen-reading software often cannot update their browsers when you'd like them to because the assistive technology does not yet support the new version. As a result, even the most web-savvy and cutting-edge users will not be able to access some of the on-the-edge exciting features you're using. What can you do?

The simple solution, of course, is to avoid the use of non-text elements. But, that may be a limitation you cannot live with. If that's the case, provide an alternative to any non-text content you have. For example, if you've used an applet to get user input, also provide a straightforward HTML form to get the same information. This form may not have the extensive error-checking that you were able to provide with the applet, but your users will be able to get past the input screen and move on to your valuable content.

Hint: Viewing Your Site without Graphics
Do you want to see what your page will look like without images? If you're using Internet Explorer, go to Tools/Internet Options (Alt-T, then "o"). Pick the "Advanced" tab (Control-Shift-Tab once will do it. Under multimedia, uncheck "Show Pictures." Press the Space bar on it if you are using the keyboard. Choose "OK" until you return to the web page. Now, refresh the page (press F5) and you'll see your page without images.

from American Foundation for the Blind
 

Contact WingsDove for effective web design solutions, including  search engine optimization.