Accessibility Retrofit to Future-Proof your Site


Starting from scratch is much easier than retrofitting a site. To do this, you need to think about your visitor. Assume that your visitor will be using a different “terminal” than you use.

  • Add Alt text everywhere

    • This is the simplest accessibility strategy
    • Assistive technologies read the screen aloud
    • Acts as an information placeholder was images download

  • If navigation is images (buttons) add Alt text to repeat the wording of the buttons

    • Consider converting the navigation to CSS
    • CSS navigation is only an HTML list that is styled by CSS
    • CSS navigation is faster to download, does not require Alt test, and does not need multiple buttons

  • Add Alt text for decorative images

    • Make the descriptions descriptive
    • Do this for each one

  • Add Alt text to spacer images

    • Spacer images server no real purpose
    • Add either <empty> or an asterisk for Alt text
    • Better yet, use CSS and get rid of the “useless” spacer graphics

  • Test your site by checking the images in a browser

    • If you hold your mouse pointer over the image, you should see the Alt text
    • This works for some browsers
    • If it does not work for the browser that you currently use, find another browser for testing purposes

  • Deal with tables next

    • Add headers to both columns and rows
    • Specify header types
    • Add a table summary

  • Make text resizable

    • Change pixel sizes of text to either percent (%) or Ems
    • Choose a font size that is similar to how what the site uses now
    • Preview the font size in a browser and then resize
    • CSS is the best place to control font size for the entire site

  • Add access key for forms

    • Access keys (or tab indexes) allow visitors to move through the site with tab key presses instead of mouse clicks
    • For example, if the access key is Alt q, the cursor will move to this location without needing to use the mouse
    • You then set the tab order, once on the form, the Tab key moves from field to field
  • Add hidden anchors

  • Add contextual links (i.e., instead of saying “"Read More”, describe what the link goes to, e.g., “Link to the Autobiography of, RatRace, my Pet Hamster”

  • Create a site map, and repeat the main navigation at the foot of every page

Site Test Tools

A product like Dreamweaver MX 2004 (or later) can check each page for accessibility.

Another step might be to use the W3C's Quality Assurance Tools. Sites that are validated are well on their way to meeting accessibility guidelines.Link to W3C's Quality Assurance Tools

Want to Test your Site?

Here is a link to a free portal that will test your site (One page at a time.).

Bobby™ at Watchfire.com