Examples of Accessible (and Inaccessible) Web Design

• Every image should have good ALT text
• Separate block of ALT text
• Use simple ALT text for simple images
• Proper use of image maps
• Make link text descriptive but brief
• Use link text that can stand alone
• Provide good keyboard navigation
• Provide alternatives to controls and applets
• Provide alternatives to tables and frames
• Don't assume your formatting will be seen
• Don't require the use of style sheets

If you don't use ALT text, the user may not have enough information to make choices:

Click on your choice now:

[LINK]       [LINK]

Another fine Web site from

Another fine Web site from

[Company Logo] 

Large Yellow Bullet Introduction
Large Yellow Bullet The Problem
  Small Red Bullet Historical Analysis
  Small Red Bullet Current Situation
Large Yellow Bullet The Solution

* Introduction
* The Problem
  - Historical Analysis
  - Current Situation
* The Solution

Photo of a bull in the water canoeing

Less comical results could be had by putting the images on separate lines and punctuation. Capitalization helps as well, although that is lost on a blind user.

Photo of a bull in the water.
Canoeing.

[Photo of a bull in the water][Canoeing]

Learn More About the Human Body

Diagram of the human body showing highlighted organs; 
use text links below.

The human body is a complex system of organs 
that work together.

[Heart] [Lungs] [Brain] [Liver] [Stomach]

It's clear that the following example is easier to read:

The following might be considered even better:

This link isn't meaningful when taken by itself:

Worse, when taken by themselves these links are indistinguishable:

This example shows better link text that is brief and unambiguous:

The following image map defines it's areas in random order. Try using TAB to navigate through the buttons. (Sorry, Internet Explorer 3.0 makes you TAB through all the other links to get here.)

The following image map defines its areas in the proper order. Again, try using TAB to navigate through the buttons:

For example, a page with a searchable index usually relies on text entry fields and often push buttons. Such a page can have a link to an alternate page like this one:

The previous page would link to the text index shown below:

An on-line form for orders or registration should tell the user how to accomplish the same thing using phone, fax, mail, or email:

This is what the blind user would perceive:

Tables are used for Frames are used for
positioning text and dividing the window
graphics in rows into regions that are
and columns. scrolled independently.

Doesn't make sense? Here's what you were trying to say:

Tables are used for    Frames are used for
positioning text and   dividing the window
graphics in rows       into regions that are
and columns.           scrolled independently.

Tables are used for positioning text and 
graphics in rows and columns.

Frames are used for dividing the window 
into regions that are scrolled separately.

Simple tables don't require an alternate presentation. Examples are those found in this web page, that are used only for centering or drawing borders around single objects.

Here's an example of what they might read:

Register for one of the days shown in green:

      * Mondays
      * Tuesdays
      * Wednesdays
      * Thursdays
      * Fridays

       
Word         Excel

       

Word         Excel

This shows a page as it appears with style sheets enabled:

This is how it appears when style sheets are disabled or unsupported:

as designers we demand...
as designers we demand...

~2~
~2~
the ability to control
the presentation of a
Web document...