Designing Your Web Site for the Disabled

Tips for accessible design

By: Larry Hull

January 2, 2001

archive

The following article has been archived due to outdated material, links, or other content. It may still have helpful content but please visit our Learning Center for more current articles that may cover a similar topic. If you wish to update this article or have questions about our archiving process, please contact us at writeforus@techsoup.org.

As the Web becomes our main vehicle for exchanging information, sometimes we overlook the fact that people with disabilities have every moral and legal right to have access to that information. We need to ask ourselves whether our sites are accessible to people who are blind or visually impaired, deaf or hearing impaired, or physically challenged and may use assistive technology, such as Braille terminals or screen readers.

What is a Screen Reader?

The blind or visually disabled may use an assistive technology called a screen reader to navigate the Web. Screen readers look at the HyperText Markup Language ( HTML) file that generates a Web page and read the content using synthetically generated speech. The best readers "understand" specialized HTML and, if a few simple rules are followed, the page content is as accessible to the visually disabled as to someone without a disability.

What Are the Problems?

One problem is graphics that provide information. For example, if a navigation bar has text links, a screen reader will speak those links. However, if the navigation bar uses graphic buttons and provides no alternative text, the reader will either ignore these links or repeat the word "image". Now the user is lost on the page and doesn't know where to go next.

Other problems result from poor or incomplete HTML that confuses the reading software, causing the screen reader to skip content and links or to read text out of order, speaking nonsensical sentences.

What Are the Legal Rights Mentioned Earlier?

Three laws are starting to have an impact: the Americans with Disabilities Act ( ADA), Section 508 of the Rehabilitation Act (applies only to federal government agencies and their contractors and suppliers), and Section 255 of the Telecommunications Act. These laws are important for everyone, not only for people with disabilities. Companies - including AOL, H&R Block, and Bank of America - have already been subject to legal action.

Are Ugly, Text-Only Pages the Only Solution?

Nobody wants ugly or text-only pages. In fact, a duplicate page with no graphics should only be used as a last resort. Some very easy things can make page graphics work for people with visual disabilities. A few additions and relatively easy changes can make pages more accessible to people with other disabilities. Once accessibility is understood, an accessible page can be produced with little additional work.

Where Do I Start?

The following are a few quick tips:

  • Graphics:

    Provide a text equivalent to clearly describe each image and function (e.g., via "alt", "longdesc".)

  • Image Maps:

    Use client_side instead of server_side image maps and provide "alt" text for hotspots. If used, provide redundant text links for each active region of a server_side image map.

  • Multimedia:

    Provide equivalent alternatives (e.g., a text description of video content) synchronized with the presentation.

  • Color:

    Ensure all information conveyed with color is also available without color, from context or markup.

  • Organization:

    Ensure pages are readable without an associated style sheet, particularly when cascading style sheets ( CSS) are used for layout and style.

  • JavaScript, Applets, and Plug-ins:

    Provide alternative content in case script execution is turned off or the feature is not supported by the browser or by the assistive technology (e.g., screen reader).

  • Check your pages:

    Use the validation tools, checklists, and guidelines available at sites like World Wide Web Consortium.