Testing Web Content for Accessibility
- Human Checks
- Testing with WAVE
This resource is designed to be printed as a one page PDF file. An HTML version is also available below.
Use a 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
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
Testing with 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.
- 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.
- 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.
- 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.