|All Products | Support | Search | microsoft.com Home|
|Home | Sign Up | Labs | Gifts | Directions | Information | Jobs ||
Examples of Accessible (and Inaccessible) Web DesignThis page shows examples of good and bad web page design dealing with the following topics:
Examples: Every image should have good ALT textMany 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:
Examples: Use simple ALT text for simple imagesUse simple text for simple images. When images are turned off, wordy ALT text can also become confusing or unusable:
Examples: Separate blocks of ALT textWhen images are turned off, adjacent images can convey an unexpected message:
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.
Examples: Proper use of Image MapsThis 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:
Examples: Make link text descriptive but briefMake 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:
It's clear that the following example is easier to read:
The following might be considered even better:
Examples: Use link text that can stand aloneUse 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:
Worse, when taken by themselves these links are indistinguishable:
This example shows better link text that is brief and unambiguous:
Examples: Good keyboard navigationThe TAB key moves between links and image map areas in the order they're defined in the HTMLmake 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:
Examples: Provide alternatives to controls and appletsControls 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:
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:
Examples: Provide alternatives to tables and framesTables and frames can cause text to form columns, which are confusing to blind readers.
This is what the blind user would perceive:
Doesn't make sense? Here's what you were trying to say:
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.
Examples: Don't assume your formatting will be seenDon'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:
Examples: Don't require the use of style sheetsWhen 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:
This is how it appears when style sheets are disabled or unsupported:
Copyright ©1996 Microsoft
If you have updated information or comments please email Greg Lowney.