microsoft.com/usability Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft
  Home  |   Sign Up  |   Labs  |   Gifts  |   Directions  |   Information  |   Jobs  |

Examples of Accessible (and Inaccessible) Web Design

This page shows examples of good and bad web page design dealing with the following topics:

Examples: Every image should have good ALT text

Many users have graphics turned off; they may have slow connections, and blind users find the ALT text to be more useful than graphics.

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

Click on your choice now:

[LINK]       [LINK]
If you don't use ALT text, the user may not get the message you're trying to convey:

Another fine Web site from
Of course, if your ALT text doesn't carry the message you want to convey, it still isn't very useful:

Another fine Web site from

[Company Logo] 

Examples: Use simple ALT text for simple images

Use simple text for simple images. When images are turned off, wordy ALT text can also become confusing or unusable:

Large Yellow Bullet Introduction
Large Yellow Bullet The Problem
  Small Red Bullet Historical Analysis
  Small Red Bullet Current Situation
Large Yellow Bullet The Solution
A better approach uses simple text for bullets:

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

Examples: Separate blocks of ALT text

When images are turned off, adjacent images can convey an unexpected message:

Photo of a bull in the water canoeing
Of course, this was actually two descriptions that run together, one with ALT text of "Photo of a bull in the water" and a second adjacent to it with the ALT text "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.
You can also use brackets to separate the ALT text:

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

Return to list of examples or continue to next example.

Examples: Proper use of Image Maps

This shows a good example that provides textual links at the bottom of the page, and ALT text ("Diagram of...") that alerts the reader of their presence:

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]

Return to list of examples or continue to next example.

Examples: Make link text descriptive but brief

Make link text descriptive but brief. User's don't like large blocks of underlines, and accessibility aids may have difficulty conveying the entire string to the reader:

There is a really cool web page that lists lots of places to get Grateful Dead memorabilia, including the usual albums and posters, but also locks of Phil Lesh's hair and Robert Hunter's shirts.

I also really like collecting bottle caps. I've only been able to find one page that really does justice to this unfairly neglected hobby.

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

There is a really cool web page that lists lots of places to get Grateful Dead memorabilia, including the usual albums and posters, but also locks of Phil Lesh's hair and Robert Hunter's shirts.

I also really like collecting bottle caps. I've only been able to find one page that really does justice to this unfairly neglected hobby.

The following might be considered even better:

  • Grateful Dead memorabilia. Includes the usual albums and posters, but also locks of Phil Lesh's hair and Robert Hunter's shirts.
  • Collecting Bottle Caps. I've only been able to find one page that really does justice to this unfairly neglected hobby.


Examples: Use link text that can stand alone

Use link text that can stand alone. Some tools present the user with a list of available links, and accessibility aids may only show the user with the links, not the surrounding text.

This link isn't meaningful when taken by itself:

Click here to download the new version of WebHead.

Worse, when taken by themselves these links are indistinguishable:

Click here to download the new version of WebHead.

Click here to return to my home page.

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

  • Download WebHead 2.0

  • WebHead home page

Return to list of examples or continue to next example.

Examples: Good keyboard navigation

The TAB key moves between links and image map areas in the order they're defined in the HTML—make sure it moves from left to right and top to bottom.

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:

Return to list of examples or continue to next example.

Examples: Provide alternatives to controls and applets

Controls and applets are usually inaccessible and sometimes unsupported. Always provide alternatives.

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:

SEARCH MEGA DATA ON-LINE


You can search this index. Type the keyword(s) you want to search for:


You may also use the text version of this index.

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

SEARCH MEGA DATA ON-LINE

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

* Aardvarks
* Ambulances
* Amphibians
* Amphigories

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

MEGA DATA ON-LINE FEEDBACK

[Picture of an input field with Submit button]

You can also submit comments by emailing feedback@megadata.com or calling 1-900-555-1212 during business hours.

Return to list of examples or continue to next example.

Examples: Provide alternatives to tables and frames

Tables and frames can cause text to form columns, which are confusing to blind readers.

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.
This is an example of an alternate page conveying the same information without using tables:

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.

Return to list of examples or continue to next example.

Examples: Don't assume your formatting will be seen

Don't assume that your user will see the colors you choose. They may be running on a gray-scale monitor, or be color-blind, or use their browser's options to override your choice of colors.

Here's an example of what they might read:

Register for one of the days shown in green:

      * Mondays
      * Tuesdays
      * Wednesdays
      * Thursdays
      * Fridays
The user may change font sizes, so don't assume things will line up. Here's what you saw:

       
Word         Excel
But here's what the reader sees when they've selected a larger font size:

       

Word         Excel

Return to list of examples or continue to next example.

Examples: Don't require the use of style sheets

When style sheets are used to apply complex formatting, they can render pages inacccessible to people with visual or cognitive disabilities.

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

[An image showing the words 'the ability to
control the presentation of a web document...'. The background behind
it shows a large, three-dimensional numeral 2 surrounded by wavy lines.]

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...

Return to list of examples or continue to next example.



Copyright ©1996 Microsoft
If you have updated information or comments please email Greg Lowney.