[Home Page] [Deaf Resources] [RSI Resources] [Accessible HTML] [GPS Resources]

[Web Access Symbol] Creating Accessible HTML

by Karen Nakamura -- Dept. of Anthropology, Yale University


The internet has proven to be a boon for people with disabilities. But just as it is important to design buildings with accessibility in mind, the same is true for the internet. This document describes some of the steps that should be taken by WWW designers in order to keep their pages accessible by everyone. I created this document since I haven't seen anything similar available. It should not be considered canonical and expresses my opionions only.

Creating Accessible Pages

Flexibility is the key to accessibility. It's important to keep in mind that people will be using a variety of technologies to access your home page. Keeping your page accessible doesn't mean that you have to stick to the lowest common denominator (such as all text with no graphics), but it does mean keeping such options open. In an age of intelligent HTTP/WWW servers that can query clients about their feature-lists, there is no reason why you can't easily have both a graphic-laden document and one that is designed more for vision-impaired people, for example. Your HTTP server can query the user's browser and serve them the appropriate page or you can provide a TEXT ONLY link option.

Accessible buildings benefit everyone. The same ramps that help people in wheelchairs also aid people on crutches, those pushing baby carriages, or package delivery carriers. In the same way, making the Internet accessible not only benefits the disability community, but helps everyone. The basic premises of accessibility are ease of use and availability of options (as well as, ease of construction). A properly-designed, accessible site is fun, easy to use, and loads quickly.

Opening up your HTML documents so that they are more accessible not only increases your market towards those with disabilities, but also to people using non-standard or cutting edge technologies. The tools that let a blind person read a page using Lynx at home also help someone with a Palm VII with CPDT wireless link access your page from the back seat of their Lexus.

Let's go briefly over various disabilities and how you can accomodate them on your pages:

Hearing impairment.

If you have any live video, remember that some people may not be able to hear the audio track. New technology is being created to display closed captions on digital video, but for now, think about having an open-captioned version. For audio-only presentations, please keep a downloadable transcript available. Make sure a volume control is clearly visible. Have visual feedback (ie, a button flashes when clicked) as well as audio feedback (the button makes a "click" sound) for controls.

Transcript options help broaden your market by allowing for multiple languages to easily be added. It's difficult and expensive to re-record the soundtrack for Japanese, for example, but adding the technology once to do subtitling or transcripting for English will also pay-off in simplicity in adding other languages.

Technologies such as Apple QuickTime or DVD/Blu-Ray have the ability for multiple audio tracks and built-in captioning/subtitling features. Take advantage of these to open up your market to a broader audience.

Vision impairment

Many people who are blind or visually handicapped often use a simplified program such as Lynx as their WWW browser -- in conjunction with a text-to-speech program. You should make sure that you always have a workable text-only option so that these users can access your page. This means, always using the [ALT] tag when presenting graphics and creating alternatives to IMAGEMAPs. If possible, give textual descriptions (in a hyperlink) of graphics that might be important to your page. Also, some people who are vision impaired may have difficulty reading small text. Don't use a <font> tag with a hard-coded value such as <font size=8>, instead give a relative value so that people who have increased their font size can read it as well (for example <font size=-2>. Have audio feedback (ie, a button makes a "click" sound when clicked) as well as visual feedback.

Be aware that some people are red-green colorblind and may not be able to differentiate between these color options. Other people maybe be using grey-scale monitors or black and white monitors. Make sure that hotspot borders are clearly delineated if this is important to your page's use. Keep fonts clear and legible. Lucida, Times Roman, and Helvetica are particularly easy to read. Many people turn off "background colors" to increase legibility, but this doesn't help if all of your buttons are part of a design graphic. Make imagemaps high-contrast.

Some web designers enjoy having blue text on a purple background in their web pages. Even people with good vision can't read these pages. Although your Scottish heritage might insist on blue/green plaid, that doesn't mean you have to use it as your web page background. Keep your backgrounds monochromal or use Photoshop (TM) or other image editing program to lighten the tone of the background image until it is very faint. As a test, squint or put on heavy sunglasses. If your page turns into a smudge, then you need to think about how to make it more visually accessible. Believe me, good graphic design is always clear, legible, and beautiful.

Mobility Impairment

Some people with quadraplegic or other neurophysical impairment may use alternative pointing devices. Elderly internet users may not have the dexterity of younger ones and may not be able to see small "hotspots" on the screen. Don't make clicking on imagemaps an exercise in dexterity. Keep the "active" areas as large as possible. Offer alternatives such as a textual listing of options.

Popup navigational menus are handy, but are often hard to use if you are mobility impaired (or just plain elderly). Make sure to have options. Don't use hierarchical menus if you can help it.

Economic Accessibility

You should be aware that not everyone can afford full-speed access to the Internet. Some people's only internet access is through their public libraries -- and is often only a Lynx terminal. Quite a number of people only have access with 2400bps lines. Many commercial sites assume that you have a Pentium Pro III machine with 128 megabytes of RAM; a T-1 link; and the latest ShockWave (TM) plug-ins. Bad bad bad.

As with the general rules of accessibility, you should assume Lynx is your lowest-common denominator and write your site so that it is Lynx-accessible, using [ALT] tags and textual versions of imagemaps. Make viewing images and sound files an option, not a requirement. Don't assume your users can simply download a plug-in -- they might not have enough memory (or the privilege on a public machine) to do so.

Educational Accessibility

Not everyone has the opportunity or ability to reach the same level of schooling. Remember, you don't have to use complex wording or difficult vocabulary just because you might be describing a difficult concept. It's perfectly possible to explain things in a clear and easy-to-understand manner without using 8-syllable words and twenty subjunctive clauses. It's much more an example of your skill as a writer if you can write so that people can understand.

This benefits more people than you might think. Children might be accessing your site in order to do their homework. People with learning disabilities or with degenerative neurological disorders are increasingly becoming "wired." Rich people in Japan who might want to buy your product might not be able to get past your first sentence of your home page (smile). Keeping your language clear means more people can access your site.

Most newspapers in the United States suggest that their writers write at a 4th grade reading level. Many word processors have grammar checkers that will tell you what your writing level is. Use them and see what you can do to make your text easier to comprehend.


A quick summary of DOs: and DON'Ts

Other Resources and Links

Copyright 1997-2008 by Karen Nakamura. All Rights Reserved.

Feel free to print and distribute this document in any non-commercial setting as long as this copyright notice is attached. Feel free to use the material in educational settings as long as you properly cite it (the title title "Creating Accessible HTML Guidelines by Karen Nakamura" 1999 and URL [http://www.deaflibrary.org/accessibility.html] are acceptable as a citation method).

[N/A] accesses since October 2, 1996. This page was last updated on April 4, 2008. [http://www.deaflibrary.org/accessibility.html] [Web Access Symbol]

To your right is the new Web Access Symbol (for people with disabilities)