Designing Accessible Web Pages

 
Last Updated  
Home
Blindness
Color Blindness
Deafness
Physical Mobilities
Example Page
Links & Resources
Site Map





Example Page

While it is always preferable to design accessible websites from the start, there are also ways to repair existing websites for increased accessibility. We used the Babies R Us Catalogue web page to illustrate how to repair a website for increased accessibility.

The free diagnostic software tool APrompt was used to diagnosis areas in need of repair on the Babies R Us Catalogue web page.

  1. Selecting a Web Page to Test

    2. We chose the Babies R Us Catalogue web page. This is what the web page looked like before the suggested repairs were made.

    Image of the 2002 Babies R Us catalogue web page

  2. List of Items in Need of Repair

    3. Below is an example of the accessibility check for the Babies R Us Catalogue page website. The checked items in the columns illustrate areas on the website that need repair to be accessible. In total 70 areas were identified for repair.

    Image of a list of suggested repairs for the 2002 Babies R Us catalogue web page generated by APrompt software.

  3. Repairing Color Contrast

    4. Here is an example of how to change the color contrast on the web page. In this case, the dark blue links on the medium blue background were changed.

    Image ranking the degree of color contrast between the background color, text, links, visited links, and active links.

  4. Repairing Flickering Objects

    5. Below is an example of how to change the html code on the Babies R Us Catalog web page so that the objects don't flicker. To complete the above step, select "Show Next Object" and select "Repair". The Babies R Us required 33 of these repairs.

    Image with instructions and example code for eliminating code that causes flickering images.

  5. Repairing Missing Alternative Text

    6. Alternative text was missing for several graphics. Below is an example of how to repair instances where alternative text is missing by including alternate text for graphics.

    Image with instructions about how to include alternate text for graphics.

  6. Repairing Missing Longdesc Attributes

    7. Several images did not have long descriptions. Below is an example of how to use the longdesc attribute and the descriptive link (d-link) to add descriptive text to elaborate images.

    Image describing how to use the longdesc attribute and the descriptive link (d-link) to add descriptive text to elaborate images.

  7. Naming Links Correctly

    8. Titling a link "Click here" doesn't provide enough information for the user. Below are examples of how to correctly name links.

    Image describing how to correctly name links.

  8. Conducting Manual Repairs

    9. This step allows you to conduct manual repairs. This screen allows you to check your page for listed concerns which may or may not be a problem. Each time you highlight a concern in the window, an explanation is given in the "Details" area.

    Image describing how to manually conduct repairs.

  9. Providing Skipover Options

    10. When a document has a large number of sequential links a skipover option should be provided. Below is an example of how to provide the "skipover" option to the user.

    Image describing how to skipover large amounts of sequential links.

  10. Babies R Us Catalogue Web Page After Repairs

    11. Below is an image of the Babies R Us Catalog web page after the suggested repairs have been made.

    Image of the Babies R Us Catalogue web page after repairs.


home | blindness | color blindness | deafness | physical mobilities | example page | links & resources | site map