HOME Calendar Join / Renew PC Alamode About Us HELP Sponsors
Reviews Columns Features Theme Issues   Archives Other  


 The Lazy Webmaster

Accessible design
August 2004

Susan Ives

Susan Ives is a past-president and past-webmaster of Alamo PC.


We’re all familiar with accessible design in the physical world. Grab bars in the bathroom. Sidewalk cuts. Wheelchair ramps bypassing the stairs. Automatic doors. Close captioning for the hearing impaired.

We’ve also all noticed that these modifications are useful even to those of us without disabilities. Sidewalk cuts make it easier for moms with strollers to walk downtown. The ramp is a godsend when you are trailing a wheeled suitcase. That automatic door in the library sure helps when you have your arms full of books.

Accessible design for the Web follows the same principles.

A blind person may use a screen reader program that can’t navigate unlabelled graphical icons. The same design principles that make a Web page accessible to the blind user also help people who turn off their graphics because they have a slow modem.

People with low vision often increase the font size on a web page. So do I. Some design techniques allow this; some lock in the font size and are not considered accessible.

A deaf person can’t hear the audio track on an online video. Neither can the hearing person who uses the Internet in a public place like a library where the computers don’t have speakers and sound cards.

The rules for accessibility can get quite complicated, especially if a site is required to comply with Federal or State accessibility rules. (Read the Federal rules). However, there are some simple things every webmaster can do to make his or her site more accessible.

The basic rule is to write good code. Screen reader programs are less forgiving than Netscape or Internet Explorer. If you forget to close a tag, for example, the entire process might seize up.

There are tools that can help you get it right. One of them is A-Prompt, a free program that will scan your site, identify problems and offer suggestions to correct them, all in a user-friendly interface.

Another tool is Bobby, an online service that will scan through your pages one by one and point out accessibility errors.

One of the neater tools I found is the free Web Accessibility Toolbar, from the National Library Information Service in Australia. It uses a technique called “bookmarklets” to install a toolbar on your browser. You can select from dozens of different tests from analyzing your code to simulating the Web experience for different users. Download.

Getting it right the first few times is difficult, but once you become aware of the principles of accessible design it becomes second nature.

As a minimum, graphics should be identified by using the “alt” tag. The format for this is
<img src=”graphic.gif” alt=”description of the graphic”>.
If a graphic cannot be viewed, the alternate text will appear. If the ALT tag is not used, a blank box will show on the screen – not very useful.

You can include a long description in the alt tag but it has some quirks.

When the graphics are disabled, only as much of the text as will fit in a space the size of the graphic will show permanently on the screen. If it is a big picture, all of it might fit. If it is small, none of it, or only a word or two, will show.

When you hover your mouse over the graphic all of the words will show but they will only stay on the screen for about five seconds.

So, keep descriptions short, but make them meaningful. Label them all. If a graphic is purely decorative, I usually call it “decorative doo-dad.”

Sometimes you may need a longer description than can be fit into the alt tag. There are several techniques for accomplishing this.

First, you can include the additional information elsewhere on the page, perhaps as a caption to the graphic or as descriptive text elsewhere on the page. Your goal is to make sure that everyone can get the information they came for. If you show a map to give directions to your business, also include textual directions.

Second, you can include a “D” link. The D stands for description and is placed to the right of the graphic. It links to another page that contains a more detailed description. It is fairly discreet and people who use screen reader programs will know what it means.

Finally, you can use the LONGDESC (long description) tag. The format is:
<img src=”smiley.gif” alt=”description of the graphic” LONGDESC=”smiley.html”>.

LONGDESC is not supported by Internet Explorer or Netscape but is supported by screen reader programs. The link takes you to another page (which you must create) that contains the longer description. You can create a separate page for each description or include all of the descriptions on one page and direct people to the right spot by using the NAME tag. The format for this would be:
<img src=”smiley.gif” alt=”description of the graphic” LONGDESC=”longdesc.html#smiley”>.

Another visual consideration is color combinations. As many as one in twelve of your users may have some sort of color blindness; the most common is protanopia, red/green color blindness, caused by the absence of red cones.

I remember one of the first PowerPoint presentations I attended. The poor briefing officer had slaved over his slide show for days. When he showed his first chart the general blew his stack: he was colorblind and all the pie charts and bar graphs were meaningless blobs. The presentation had to be done over using patterns rather than colors for the data fills. Oops.

At Wickline you can run your Web site through 11 different online checks for color problems: it’s enlightening!

Hearing impaired users have different challenges.

More and more Web content is multimedia: audio or video files, or Flash files. The ideal solution is to provide a full transcript for such files, but that is time consuming and not always feasible. An alternative is to caption audio files; one free program that helps you do that is MAGpie, the media access generator developed by the National Center for Accessible Media. It’s a free download.

Accessible Web design it not only a kindness to your users with disabilities; it makes for a better overall experience for all of your users. It’s not a lazy technique, but it is an essential one.
 


Copyright© 1996-2008
Alamo PC Organization, Inc.
San Antonio, TX USA