Designing Accessible Web Sites


  1. Why Design Accessible Web Sites?
  2. Tips on Designing Accessible Web Sites
  3. Resources for Designing Accessible Web Sites

Why Design Accessible Web Sites?

If your page looks great and works, isn't that good enough? If you even checked it in the other major browser, surely that is enough, isn't it? Well, no. What looks good in your browser on your computer with your settings may be completely inaccessible to potential visitors with a different browser, a different operating system, or different capabilities.

But, you may be thinking, the Web is a graphical medium, so why worry about people who cannot appreciate your graphic design? You haven't seen many "hits" from people using the Lynx browser, so why go to any trouble for such a tiny audience? Aren't those people who whine about "accessibility" trying to force you to trash all your pictures and have just boring text on the default background, or else to maintain two sets of pages? It is true that most people on the Web currently use Netscape or MSIE. It is also true that color and images can enliven your page. Nobody is demanding that you get rid of the fancy stuff. The point is that some very important visitors do not or cannot use all of the features of the latest browsers. You can rudely turn them away, or you can accommodate them--and usually it is no extra trouble to welcome everyone to your site.

There are several good reasons to strive for accessibility.

The Historical Reason

The Web was intended to be accessible to anyone with a connection to the Internet and a browser. HTML, the markup language of the Web, is intended to "degrade gracefully", that is, later additions to the language should not be a hindrance for older browsers. Do we really want to go back to the days--not so long ago--when it was extremely complicated to communicate with someone on a different network?

The Legal Reason

In the United States, we have the Americans with Disabilities Act. Other nations, such as Australia, have similar laws forbidding discrimination against people with disabilities. If you receive funding from the government, or do business with the government, this anti-discriminatory policy may apply to your web site.

The Pragmatic Reason

Why be satisfied with a site that looks OK to 80% of the people on the Web when, with hardly any extra work, your site could be useful to 100% of people on the Web? You do have something valuable to offer, don't you?

The Technological Reason

Some of your most important visitors are search engine spiders. Robots are not impressed by pretty pictures and can't use your frames, Shockwave, or JavaScript. If your site displays, This web page uses frames, but your browser doesn't support them, to spiders, how many human visitors do you think you will attract with that summary?

The International Reason

Many people in the United States and Canada pay a fixed rate for Internet access, or get it free through their school or job. This is not the case in other countries, where Internet use is billed by both time and distance. Although the average modem speed is now between 28.8 and 33.6 Kbps, the number one complaint in the GVU's Ninth WWW User Survey (April 1998) was speed. If your site takes too long to load, your potential visitors will leave.

The Ethical Reason

Making your web sites accessible is just the right thing to do. You could think of this as the "Catholic guilt" or "Jewish guilt" reason, if the shoe fits. One of the most fundamental Jewish ethical principles is, "Thou shalt not curse the deaf, nor put a stumbling block before the blind" (Leviticus 19:14). Does your web site put a stumbling block before the blind? Christians of course have the "Golden Rule" (Matthew 7:12; Luke 6:31). If you had vision problems, or a slower modem, or an older browser, or were charged by the minute, how would you like to be treated?


Tips on Designing Accessible Web Sites

Validate Your HTML

Browsers have some compensation for errors, but you cannot trust that every version of every browser will cover for your mistakes. A document written to valid HTML syntax is your best bet to assure that your site will be legible and useable in the greatest number of browsers. Go straight to the top and see if your markup passes muster with the World Wide Web Consortium. They offer a validation service at:

http://validator.w3.org/

Use HTML to Convey Structural Meaning

HTML is a markup language. It is not desktop publishing. Don't misuse HTML in an attempt to achieve a pixel-perfect physical appearance. All it takes to ruin your "perfect" creation is one visitor with a bigger screen, fewer colors, or a larger default type size.

Use HTML to convey the structure of your document rather than to dictate physical appearance. <BLOCKQUOTE> does not mean "indent"; it means, "This is a longish quote." <P> does not mean, "Double-space, please"; it means, "A paragraph starts here." Use <H1> through <H6> for headings, in descending order of importance.

Make Sure Your Pages Can Be Read Without Images

Always use ALT text for images. This is required in HTML 4.0. If you do not supply ALT text, your visitors with text browsers, speaking browsers, or images turned off, will know that there is an image (or link or imagemap) there, but have no idea of its purpose.

To read your page in Lynx 2.7.1, you can use Lynx Viewer.

You can also read your page in the Lynx browser by using telnet and a guest account at one of the Public Access Lynx Sites. These are working versions on Lynx 2.5 through 2.8.4, so you can not only read your page but also test links, imagemaps, frames, etc.

If you have Windows, a sound card, and speakers, you can get a very rough approximation of how a speaking browser would handle your page by downloading the free software called HELP Read (formerly known as ReadToMe). Ironically, their official home page is graphics-dependent; Lynx users can get HELP Read at an older HELP page.

Don't Rely on "Fancy Stuff"

Don't use frames except as a last resort. Older browsers cannot use frames at all. Most browsers cannot "bookmark" frames anywhere but at the first set of pages. Even three frames on a page can take up far too much real estate on a smaller monitor, and monitor prices are not in freefall like memory or storage. Framed pages seem to take longer to download--remember that the number one problem users have with the Web is lack of speed. If you feel you must use frames, make the <NOFRAMES> section useful, and provide navigational links on subpages.

Don't rely on Java or JavaScript for essential purposes like links and form submission. Many people on the Web do not or cannot use Java or JavaScript.

Be Careful in Your Use of Tables

Tables are useful in some contexts, but they present problems for people using text browsers or screen readers. If you use tables, make sure they are legible in a text browser like Lynx. The Web Accessibility Initiative strongly recommends a separate text-only link for all pages with tables.

Even syntactically valid tables can cause problems in Netscape. Always use ending tags for cells, rows, and the table itself.

Put Your Site on a Diet

Since so many surfers are concerned with speed, the smart thing to do is to make your pages lean and mean. The Web Design Group recommends that no individual page exceed 50K total, including images.

  1. Avoid using images of text.
  2. Avoid embedding sound files.
  3. Don't use frames.
  4. Make it a game to see how much you can reduce image size, both in physical size and in file size, and still have something you can live with. For GIFs, try reducing the number of colors. For JPEGs, try a lower quality of compression. Use thumbnail images to link to big, beautiful images.

Don't Try to Control Your Visitors' Experience

Avoid doing anything that prevents your visitors from using their computers in the way that is best for them.

Do not hijack your visitors with META REFRESH.

Avoid using the <FONT> tag. If you use FONT FACE, the entire section so marked will disappear in some browsers. Using FONT SIZE, especially absolute size, is just plain rude. Trust people to have type set at a size that is comfortable for them. FONT COLOR cannot be overridden by visitors, and it may make your page completely illegible. For the same reason, you should avoid BGCOLOR in tables.

Be Considerate in Your Use of Color

If you use background textures, set the BODY BGCOLOR close to the predominant color in the image. Otherwise your pages may be illegible if images are turned off or if the image breaks along the way (hey, it happens).

If you define one color in <BODY>, define them all.

Dark backgrounds are harder to read and harder to print.

Full-intensity colors together are eye-popping (in a negative way) for most of your readers, and may appear as black on black to a minority of visitors.

Remember that besides blind or visually impaired surfers, there are also potential visitors with color perception problems. Around 8% of men are colorblind, and the most common problem is with red and green. Some are insensitive to one or the other, so that red or green will appear as black. In others, perception of one color is shifted to the other, so that they see red and green together, as yellow. Besides using different hues to indicate different information to your visitors, also use different intensities, as if your page would be seen on a black-and-white television.


Resources for Designing Accessible Web Sites

  1. Alertbox: Jakob Nielsen's column on Web usability.
  2. Bobby. A linter that checks your document for browser compatibility and potential problems for visitors with disabilities.
  3. Doctor HTML. A linter. The most useful features from the perspective of accessibility are the image analysis and the estimation of download time.
  4. Viewable With Any Browser. A wealth of information, including an Accessible Site Design Guide.
  5. The Web Accessibility Initiative. Sponsored by the World Wide Web Consortium. Includes an authoring guide.
  6. The Web Design Group. See especially their introductory pages on Accessibility.

ObComputing Directory | Elizabeth T. Knuth's Home Page

Comments to: eknuth@unix.csbsju.edu


Valid HTML 4.0! | Bobby approved

Designing Accessible Web Sites / Revised 30 June 2003 / © Copyright 2003, Elizabeth T. Knuth / URL: http://www.users.csbsju.edu/~eknuth/obcomp/access.html