i/s Back Issues

Volume 13

No. 2  November/December 1997

How to Design an Accessible (ADA-Compliant) Web Site

At a recent conference, Catherine Weeks of the University of Missouri-Columbia gave a presentation on how to make Web sites readable for people with disabilities. This article presents some of her points, in a very condensed version. You can read the full paper, with examples of HTML code, at http://www.missouri.edu/~cccathy/ada/

Misconceptions
People think writing accessible code is hard, or that they have to change their design to make it accessible. It's assumed that you should omit things like graphics, Java, JavaScript, tables, frames, and forms when designing ADA-compliant pages. None of the above is true.

Writing accessible HTML is easy. It is additive: there is very little you need to change; rather you need to add to the design and HTML codes.

Making Your Page Accessible
Here are some of the guidelines for accessibility outlined in Weeks' paper.

  Text-only Link. Browsers like Netscape Navigator and Internet Explorer display graphics automatically. Others, like Lynx, are text-only browsers. Screen-readers, for people with visual impairments, also function as text-only readers. To facilitate easier access, create a text-only version of the Web page, and put a link to it at the top of the graphical version of the Web page.

  Alt Tags. Alt tags are used in conjunction with the image source code and give the image a "name." When a screen reader or text browser encounters an image without an alt tag, the word "[image]" is displayed on screen, and the person browsing this page has no idea what the image is or why it is there. Alt tags let you include a short description of the image in question, so your viewers can "see" what they are missing.

Alt tags should also be used to include a short description for imagemaps, sound files, and Java applets.

  Blink Tags. Don't use them. Besides being annoying, they crash screen readers. This is the only HTML that really shouldn't be used at all.

  Buttons/Image Maps. Whenever possible, use buttons rather than image maps. Image maps are inaccessible to people with visual impairments, and buttons that serve as links work much better in text browsers. If you must use an image map, repeat the links elsewhere on the page to assure accessibility.

  Tables. Tables should be aligned primarily left-to-right then top-to-bottom, because both text-only browsers and screen readers read table cells from left to right. In other words, put your headings down the left-hand side of the column.

  Sound Files. To make sound files accessible to people who are deaf or hard-of-hearing, provide a link to a text transcript of the file. This is also helpful for people who don't have machines that can play sound files.

  Bobby. Use Bobby, a free service at http://www.cast.org/bobby/.
This page analyzes your Web pages for ADA-accessible code, and points out any errors it finds.

i/s Home |  i/s Back Issues |  Volume 13 |  No. 2