Quick Reference
Testing Web Content for Accessibility

Use a checklist

• Section 508: webaim.org/standards/508/checklist/
• WCAG 1.0: www.w3.org/TR/WCAG10/full-checklist.html
• WCAG 2.0 (draft):www.w3.org/WAI/WCAG20/quickref/

Disable styles and linearize tables

• Styles can be disabled in your browser, with WAVE, or with the Web Developer toolbar for Firefox.
• Ensure the reading order is logical.
• Ensure content is understandable and usable.

Check alternative text

• Ensure alt text is succinct, but accurate and useful.
• Using the Web Developer toolbar, select...
  • Display Alt Attributes. Is the alt text equivalent?
  • Replace Images With Alt Attributes. Does the alternative text make sense?

Verify color and contrast

• Color contrast: juicystudio.com/services/colourcontrast.php
• Color-blindness: colorfilter.wickline.org

Test content scaling

• Enlarge the font in your web browser to 200-300%. Is the page readable and usable? Is horizontal scrolling minimized?
• Zoom the web page in your browser (enlarge fonts and images). Is text in images readable? Is contrast sufficient?

Check keyboard accessibility

• Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
• Is a "skip navigation" link available? (see webaim.org/techniques/skipnav/)
• Make sure the navigation order is logical.

Evaluate form accessibility and usability

• Click on the form label. If the field gains focus, it is properly labeled. WAVE also identifies form labels.
• Ensure that you can complete all forms with a keyboard.
• Are error recovery mechanisms present and easy-to-use?

Test with a screen reader

• Focus on navigation, forms, and dynamic content.
• WebAIM tutorial: www.webaim.org/articles/jaws/

Valid HTML and CSS

Not essential, but recommended

• HTML: validator.w3.org
• CSS: jigsaw.w3.org/css-validator/

About WAVE

• WAVE is an accessibility evaluation tool that embeds inline accessibility feedback into your web content.
• WAVE identifies accessibility errors, alerts, and possible features, using color-coded icons.
• WAVE cannot detect all possible accessibility problems, but greatly aids in human evaluation.

Using WAVE

• Online at wave.webaim.org
  • Enter the URL of a webpage.
  • Upload a file from your computer.
  • Type or paste in HTML code directly.
• Using the WAVE Toolbar for Firefox
  • Download from wave.webaim.org/toolbar
  • Reports created directly in your browser.
  • Ideal for dynamic, sensitive, intranet, and password-protected content.

WAVE Icons

• RED icons indicate accessibility errors. These are things that WAVE has identified as accessibility issues.
• YELLOW icons indicate alerts, or possible accessibility errors. WAVE cannot verify that these are actual problems, but identifies the potential issues so a human evaluator can manually evaluate them.
• GREEN icons indicate accessibility features. If used properly, these items can enhance the accessibility of web content. Human evaluators will need to determine if each accessibility feature is implemented correctly.
• BLUE icons indicate structural or semantic elements. When used correctly, these can add valuable organizational data and semantics that can help with navigation and presentation of a web page in assistive technologies.

Report Views

• Errors, Features, and Alerts is the default view with most WAVE features enabled. Accessibility errors, potential errors (alerts), and accessibility features will be shown.
• Structure/Order View shows the overall structure of the page. The number indicators show the reading/navigation order of the content. Follow the numbers to determine if the reading order of the page makes sense and is logical.
• Text-only View provides only the underlying text of the page. Information that is commonly read by screen readers (such as alternative text for images) will be presented. The visual styling of the page is removed. This provides a visual view of the types of things that a screen reader could read.
• Outline View shows only the headings that are within the page. Ensure that your page contains headings where appropriate and that the structure of the page is logical.