Quick Reference: Testing Web Content for Accessibility

(draft 4/10/07 by Paul Bohman)

See also the Printer-friendly PDF version which fits on one side of a single piece of paper (note that you may need to adjust the print settings in Acrobat: Print > Page Scaling > Reduce to printer margins).

Disclaimer: This is a quick reference, which means that it only highlights the main ideas and is not a comprehensive list of accessibility principles or techniques. Even so, I believe this to be a useful resource.

Validity/Modern Coding Practices/Structure
1. Validate the code (e.g. XHTML 1.0 strict).
2. Specify the character encoding (e.g. UTF-8).
3. Use CSS (not tables) for layout.
4. Use headings, lists, etc. to organize & structure content.
Enlargement
1. Enlarge the font in Firefox using CTRL + (the plus key). At a minimum, the page needs to be readable when you enlarge it twice using CTRL +. It’s ok if some areas don’t align quite right or if they overlap slightly, but not if the page is very difficult to read or navigate when enlarged twice.
Styles
1. Test the page with styles turned off. You can do this in Opera by going into “user mode” or in Firefox if you have the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60) installed by using the CTRL Shift S keyboard shortcut. You want to make sure that:
  1. The reading order is still logical when styles are turned off.
  2. The content still makes sense. Make sure you haven’t used colors to convey meaning, for example.
No mouse
1. Navigate the site using only the keyboard (using the tab key, arrow keys, enter key, page up, page down, etc.)
2. Provide a functional “skip navigation” link (see www.webaim.org/techniques/skipnav/).
3. Make sure the link order makes sense, so that when you tab around you’re not jumping all over the place.
Browser Compatibility
1. Make sure your browser works in all of the modern browsers, including (at a minimum), Firefox 2.0, Opera 9.0, and Internet Explorer (test it in both 7.0 and 6.0). If you use a Mac, also test in Safari. The design doesn’t have to look exactly the same, but it must be functional. (Ideally it would look the same, but sometimes this is difficult to achieve.)
Automated tools
1. Use at least two automated tools to check the accessibility of EVERY page individually. Popular tools include WAVE (http://dev.wave.webaim.org/), Cynthia Says (www.cynthiasays.com), Hermish (www.hermish.com/), WebXact (http://webxact.com/) and others. You may want to download the AIS accessibility toolbar (see the info at www.webaim.org/articles/ais/index.php) which includes links to these and other very useful tools.
Human check
1. Colors and Contrast
  1. Make sure the text is readable against the background, including links, navigation tabs, main content, etc. One way to test this is to use the tools in the AIS Accessibility Toolbar. Another way is to go to the page, hit Prnt Scrn (print screen) on your keyboard, then go to Word (or a graphics program), hit Ctrl V to paste in the screen, then print the screen to a black and white printer. If there are areas of low contrast, adjust the colors appropriately.
  2. Simulate color blindness and ensure that your pages are still readable. To do this, use the AIS Accessibility Toolbar (Tools > Simulations > Color blindness) or the the Vischeck web-based tool (www.vischeck.com/vischeck/).
2. Section 508 compliance. Check EACH page of your site against the Section 508 checklist (see www.webaim.org/standards/508/checklist.php).
3. Images (see www.webaim.org/techniques/images/):
  1. Alt text is short but accurate and useful
  2. If the image is just decorative (i.e. if blind people don’t need to know what the image is), the image is in the background using CSS (not the <img> tag) or else the alt text is null (alt="")
  3. Images which require long descriptions are described in more detail, either in the context of the page or on a separate page (and you would provide a link to that separate page).
  4. Animations do not strobe or flicker
4. Tables (see www.webaim.org/techniques/tables/):
  1. Simple tables (i.e. tables with up to two headers per data cell) have scope="col" and/or scope="row", as appropriate
  2. Complex tables (i.e. tables with three or more headers per data cell) use the headers and id method of associating data cells with their headers.
5. Links (see www.webaim.org/techniques/hypertext/)
  1. Make sure your links describe the link destination, even when read alone, out of context. For example, "click here" is bad because you don’t know where the link will go.
6. Forms (see www.webaim.org/techniques/forms/)
  1. Make sure all form elements have <label> elements. You can test this by clicking on the label text with your mouse. If clicking on the text causes the keyboard focus to enter the form element, the label works. If not, it needs to be fixed.
  2. Groups of radio buttons or check boxes need to be enclosed in a <fieldset> with a <legend>
Disability Types (www.webaim.org/articles/userperspective/)
1. Blindness(they can’t see; they use keyboard for navigation and screen reader to read content)
2. Low Vision (they can’t see small items; they have difficulty with low contrast; they may use screen enlargement software)
3. Color Blindness (red-green and red-black confusion are common; contrast may be an issue)
4. Motor Disabilities (they may have difficulty with small links; may need to use keyboard or keyboard-like devices instead of mouse)
5. Auditory Disabilities (they can’t hear audio; transcripts and/or captions necessary)
6. Cognitive Disabilities (may experience challenges with memory, attention, complex text and/or instructions, metaphorical language, etc.)
7. Seizure Disorders (strobe or flicker may cause seizure)
Accessibility Principles (see www.webaim.org/articles/pour/)
1. Perceivable (available through sight, hearing, touch)
2. Operable (compatible with keyboard or mouse)
3. Understandable (user-friendly, easy to comprehend)
4. Robust (works in several browsers, assistive technologies, mobile devices, old browsers, etc.)

This work is licensed under a Creative Commons Attribution 3.0 License.