Job Accommodation Network

DESIGNING ACCESSIBLE WEB PAGES

With millions of individuals connecting to the Internet for quick access to vast amounts of information, some web page designers have forgotten people with disabilities. For people with disabilities, much of the information on the Internet is not accessible to them because of poor web page design. The following information gives a brief overview of tips to consider when designing a web page, including legal and technical aspects.

LEGAL ASPECTS OF WEB PAGE DESIGN

The Internet was developed in the 1960s as a way for United States government authorities to communicate in the event of nuclear war. It was purposely designed with no central authority so independent sites could continue operating even if missiles knocked out some sites. Because there is no central authority controlling the Internet, each entity with a web site is seen as a separate entity when determining whether a site is compelled by federal law to be accessible.

One such federal law is the Americans with Disabilities Act (ADA) of 1990. The ADA gives civil rights protections to individuals with disabilities. It guarantees equal opportunity for individuals with disabilities in public accommodations, employment, transportation, state and local government services, and telecommunications.

Assistant Attorney General Deval L. Patrick of the Civil Rights Division of the Department of Justice, which enforces part of the ADA, issued a policy statement in response to an inquiry from U.S. Senator Tom Harkin. The September 9, 1996, letter stated that "covered entities under the ADA are required to provide effective communication, regardless of whether they generally communicate through print media, audio media, or computerized media such as the Internet. Covered entities that use the Internet for communications regarding their programs, goods, or services must be prepared to offer those communications through accessible means as well."
http://www.usdoj.gov/crt/foia/tal712.txt

A second federal law is the Rehabilitation Act of 1973, which prohibits discrimination against qualified individuals with disabilities who work in the federal government. A 1998 amendment to section 508 of the Rehabilitation Act requires the Attorney General to report to the President on accessibility of federal electronic and information technology such as federal web sites, telecommunications, software, hardware, printers, fax machines, copiers, and information kiosks to people with disabilities. Section 508 of the Rehabilitation Act, 29 U.S.C. § 794d, as amended. Section 508 states that electronic and information technology that is developed, procured, maintained or used by federal agencies must be accessible to federal employees and members of the public with disabilities, unless compliance would impose an undue burden.
http://www.usdoj.gov/crt/508/508home.html

TECHNICAL ASPECTS OF WEB PAGE DESIGN

Accessibility is not always buried in the lines of HTML code written for a page. Accessibility lies solely with the web page designer; the designer must design for accessibility. What does this mean? This means the designer must have a page that is comfortable enough for the visitor to explore while remaining interested in the page. The webmaster can make the information as user friendly as possible and still organize the information on the page to make it comprehendible. This approach leads to understanding and there is no more basic reason for having a web page than to transfer information in an understandable manner. Bells and whistles may confuse surfers. People are not necessarily comfortable with distractions and this leads to problems with comprehension as well as accessibility. Will visitors remember what the designer wants them to remember or will they remember how fancy the page is?

General Design Tips

Use standard HTML code and provide HTML or ASCII forms of all documents presented in other formats.
For graphics, use text-only alternatives of "alt" tags.
Use "alt" tags supported by a variety of browsers.
Have enough contrast so the background and text are distinct.
Keep a standard footer that includes information on who wrote the page, a disclaimer/copyright, the time of the last update, a link to the homepage, and the URL of the page.
Keep in mind a low "bandwidth," which pertains to the speed it takes to load the page.
Maintain standard page layout to decrease confusion from page to page.
Spell out abbreviations.
Avoid using columns, charts, and graphs.
Provide mechanisms for users to freeze moving objects.
If the site has forms or other unavoidable custom designs give options such as e-mail, fax, telephone, mail, to provide the requested information.

Designing for Surfers with Hearing Impairments

Provide a link to a text version of a file containing something spoken.
Add visual notifications of sounds that are played automatically.
Synchronize text and video.
Embed closed captions in the data structure of movies.
Use something like the "title" attribute to provide a brief description of a very short sound.

Designing for Surfers with Sensory Impairments

End lists, sentences, headers with appropriate punctuation to prevent the "alt" tag from running into the text that follows when read via text-to-speech or Braille.
Do not use the <BLINK> tag since it can lock a screen reader.
Use audio clips containing descriptive information.
Place an anchor (D-link) to another page that has a text description of separate viewer-based graphics.
Place links on individual lines.
Use vertical lists and state how many items are in an upcoming list and number for each item.
Have tables that degenerate appropriately.
Do not use the refresh option since this will trigger a screen reader to restart from the top of the page.
Do not use drop capitals because a screen reader will read different font sizes within a line as separate sentences, starting with the largest font.
Avoid ASCII art.
Include information about fonts, colors, and resolution.
Make color-coding redundant, i.e., bold and red.
Use proportional font markups such as H1, H2, and H3.
Test the page to see if it is readable in black and white.

Designing for Surfers with Motor Impairments

Design large buttons to mark links.
Create a consistent style for pages to limit fine motor manipulation from page to page.
Make pages keyboard navigational.

Designing for Surfers with Cognitive Impairments

Design indicators as to whether the upcoming page structure is a picture, listing, image map, etc.
Make link text descriptive but brief.
"Front-load" pages with important information at the beginning.
Use audio-on-demand applications.
Maintain consistent design throughout the site.
Keep screens organized and uncluttered.
Design clearly laid out pages with no blinking, turning, swirling, or scrolling text.
Include a graphical button-bar as a navigational aid that indicates top of the page, home page, and previous page.
Provide text-based alternatives to describe charts and graphs.
Use plain language describing obvious operations such as ways to reply to the webmaster or go to the homepage.

Testing for Accessibility

How do you know if you have addressed as many areas of accessibility as possible? Self-page testing is one option. To self-test:

1. Turn off graphics and check that the "alt" text displayed makes the page usable.
2. Turn off sounds and make sure vital instructions are not lost.
3. Use the high contrast option to see if the page is still readable.
4. Use the largest font size supported by the browser to see if the page is legible.
5. Resize the browser window larger and smaller to see if the user can get to all of the information.
6. Navigate using the keyboard to test that TAB traverses all links.
7. Select all text and copy it to the clipboard, ensuring that it makes sense when pasted into a word processor.

A page can be tested using an HTML validation service to determine if the web page source code conforms to one or several of the HTML specifications for accessibility. The validation service checks whatever URL is given for possible accessibility problems and determines what type of HTML specifications are needed. A validation service tells the designer where possible problems are and how to solve them. Several validation services are available, but two examples are Bobby and HTML Validation Service.

RESOURCES
(This is a non-inclusive list)