Quick Reference
Testing Web Content for Accessibility

Valid/Modern Coding Practices

• Validate the code (e.g. XHTML 1.0 strict).
• Specify the character encoding (e.g. UTF-8).
• Use CSS (not tables) for layout.
• Use headings, lists, etc. to organize & structure content.

Content scaling

• Enlarge the font in your web browser. The page should be readable when the font is twice the default size. The page may not appear the same, but must be readable and usable.

Disable styles, images, and tables

• Download Firefox and the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60)
• Choose CSS > Disable Styles > All Styles
• Choose Images > Replace Images With Alt Attributes
• Choose  Miscellaneous > Linearize Page
  • Ensure the reading order is still logical.
  • Ensure content is understandable. Make sure you haven't used colors to convey meaning, for example.

Device independence

• Navigate the site using only the keyboard (using the tab key, arrow keys, enter key, page up, page down, etc.)
• Provide a functional "skip navigation" link (see www.webaim.org/techniques/skipnav/).
• Make sure the navigation order is logical.

Browser compatibility

• Make sure your site works in modern browsers and across operating systems. The design doesn't have to look exactly the same (though it should when possible), but it must be functional.

Automated tools

• Use at least two automated tools to check the accessibility of each page. Popular tools include WAVE (wave.webaim.org), Cynthia Says (www.cynthiasays.com), Hermish (www.hermish.com),  and WebXact (webxact.com). The AIS accessibility toolbar (see www.webaim.org/articles/ais/) includes links to these and other very useful tools.

Human checks

• Colors and Contrast
  • Make sure the text is readable against the background. This includes links, navigation tabs, main content, etc. The AIS Accessibility Toolbar provides a contrast test. You can also hit print a screenshot of the page to a black and white printer.
  • Simulate color blindness and ensure that your pages are still readable. Use the AIS Accessibility Toolbar (Tools > Simulations > Color blindness) or Vischeck (www.vischeck.com/vischeck).
• Images (see www.webaim.org/techniques/images/)
  • Ensure alt text is short, but accurate and useful
  • If the image is purely decorative and has no content or function, place the image is in the background using CSS (not the <img> tag) or give the image null alt text (alt="")
  • Make sure that images which require long descriptions are described in more detail either in the context of the page or with a link to a separate page.
  • Ensure animations do not strobe or flicker.
• Tables (see www.webaim.org/techniques/tables/):
  • Simple tables (i.e. tables with one or two headers per data cell) have scope="col" and/or scope="row", as appropriate
  • 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.
• Links (see www.webaim.org/techniques/hypertext/)
  • Make sure your links describe the link destination, even when read alone, out of context. Avoid "click here" and other link labels where the function of the link is not clear.
• Forms (see www.webaim.org/techniques/forms/)
  • Make sure all form elements have a <label>. Clicking on the text of a properly coded label causes the keyboard focus to enter the form element.
  • Groups of related form elements should to be enclosed in a <fieldset> with a <legend>
• Section 508 compliance
  • Check each page of your site against the Section 508 checklist (see www.webaim.org/standards/508/checklist.php).

Test across disability types

(www.webaim.org/articles/userperspective/)

• Blindness – These users cannot see images or other visual styles and may use a keyboard.
• Low Vision - These users can't see small items, have difficulty with low contrast, and may use screen enlargement software.
• Color Blindness - Red-green and red-black confusion is common; contrast may be an issue.
• Motor Disabilities - These users may have difficulty with small links; may need to use keyboard or keyboard-like devices instead of mouse.
• Auditory Disabilities - These users can't hear audio; transcripts and/or captions are necessary.
• Cognitive Disabilities – These users may experience challenges with memory, attention, complex text and/or instructions, metaphorical language, etc.
• Seizure Disorders - Strobe or flicker may cause seizure.

Follow accessibility principles

 (www.webaim.org/articles/pour/)

• Perceivable - available through sight, hearing, touch
• Operable - compatible with keyboard or mouse
• Understandable - user-friendly, easy to comprehend
• Robust - works in several browsers, assistive technologies, mobile devices, old browsers, etc.