Quick Reference
Testing Web Content for Accessibility

Use a checklist

• Section 508: webaim.org/standards/508/checklist/
• WCAG 2.0: webaim.org/standards/wcag/checklist/

Disable styles and linearize tables

• Styles can be disabled using WAVE or with the "Web Developer toolbar" extension for Firefox.
• Ensure the reading order is logical.
• Ensure content is still understandable and usable.

Check alternative text

• Ensure alt text conveys the content and function of the image, and is succinct, yet accurate and useful.
• Using the Web Developer toolbar or WAVE, unsure the alternative text is equivalent and that it makes sense in context.

Verify color and contrast

• Color contrast: webaim.org/resources/contrastchecker/
• Color-blindness: colorfilter.wickline.org
• Print on a grayscale printer

Test content scaling

• Enlarge the font in your web browser to ~150%. Note that WCAG 2.0 requires 200%. 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?

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? Does it function correctly? (see webaim.org/techniques/skipnav/)
• Make sure the navigation order is logical.
• Is a visible keyboard focus indicator/outline present?

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 without a mouse.
• Are error recovery mechanisms present and easy-to-use?

Test with a screen reader

• Focus on navigation, forms, and dynamic content.
• WebAIM tutorials for JAWS, NVDA, and VoiceOver

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 (no tool can), but it greatly aids in 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/
  • Create reports 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 you can manually evaluate them.
• GREEN icons indicate accessibility features. If used properly, these items can enhance the accessibility of web content. You 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 removes images and styles and presents information that is commonly read by screen readers (such as alternative text for images).
• 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.