Manual checks when testing a website for accessibility

Manual checks when testing a website for accessibility

Before publishing a website (or updating a page) there are a number of manual checks that need to be performed (these need to be performed in addition to automated checks.)

  1. Verify the site with keyboard only navigation (don't even click on the page, just type the URL, hit enter and then start using the tab key)
    1. When you first hit tab on a page, a 'skip to main content' should appear. (Vist WebAIM to find out how to implement this.)
    2. Make sure that you can navigate completely through the site using just a keyboard and the tab order is logical.
    3. Make sure that as you navigate it is apparent what currently has focus, and the element with focus has sufficient contrast compared to what doesn't have focus (anything that has an a.hover in the CSS should also have an a.focus, and in the JavaScript OnMouseOver should also have a corresponding OnFocus.)
    4. Make sure that any interactive (i.e. Flash) elements work with just the keyboard.
  2. Check for color issues
    1. Spot check for color contrast, particularly on text overlaid or imbedded in images. You can use a tool like the Paciello Group's Colour Contrast Analyser (available for both Windows and Mac.)
      Note: for normal sized text contrast ratio should be 4.5:1, for large (18 point normal text, or bold text which is 14 point or larger) the contrast ratio should be 3:1. 
    2. Use a tool to simulate how the rendered page is viewed by someone with various types of colorblindness (the Paciello Group's Contrast Analyser, above, will allow you to view a live version of a page with different types of colorblindness, choose Image then Screen.)
    3. Use the operating systems’ ability to invert colors and verify that all colors are reversed. (This can be easily accomplished using the accessibility features on an iPad or on a Mac.)
  3. Verify all form fields have labels or title elements, and all required elements have some sort of text (i.e. an "*", or "(required)") denoting they are required.
  4. Check to make sure that everything listed as a heading is indeed a heading (use something like the WAVE toolbar and view the outline.)
  5. Turn off CSS and see if the page still flows right and the content is readable (use the WAVE toolbar and disable styles.)
  6. Magnify screen to 200% and verify the page is still usable (in Firefox Ctrl+ 6 times gets you to 200%.)
  7. Make sure data tables are coherent when read left to right, top to bottom.
  8. Run a validator (i.e. http://validator.w3.org/nu/) on the site and make sure there's no errors.
  9. Check for captions, audio descriptions, or transcripts for any multimedia on the site.
  10. Test the site with a screen reader, JAWS is available free on campus (submit a TUhelp ticket to get it installed).  If you're off campus you can try a free alternative such as VoiceOver (on Macs) or NVDA (for Windows).