Testing Web Content for Accessibility
This resource is designed to be printed as a one page PDF file. An HTML version is also available below.
Test with WAVE
- WAVE (wave.webaim.org) is an accessibility evaluation tool that embeds inline accessibility feedback into your web content.
- Dynamic or protected content can be evaluated with the WAVE Firefox toolbar (wave.webaim.org/toolbar).
- Click an icon to highlight the corresponding element and get more information.
Use a Checklist
Check Keyboard Accessibility
- If you are using Safari, enable this preference first: Safari > Preferences > Advanced > Check "Press Tab to highlight each item on a webpage".
- Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
- Is a "skip navigation" link available? Activate the skip link and hit "Tab" again to ensure it functions correctly. (see webaim.org/techniques/skipnav/)
- Make sure the navigation order is logical.
- Is a visible keyboard focus indicator/outline present?
- Test dialog boxes that pop open. You should be able to navigate and close these using a keyboard. Esc should also close these boxes.
Evaluate Form Accessibility and Usability
- Click on the form label. If the field gains focus, it is properly labeled.
- If a label is not visible, check for a hidden label or descriptive title attribute.
- Ensure that you can complete all forms with a keyboard.
- Are error recovery mechanisms present and easy-to-use?
- In WAVE, use the Code panel see the <label> for and <input> id values.
Disable Styles and Linearize Tables
- Disable styles and remove tables so the visual reading order matches the code order. To do this in WAVE, select the "No Styles" view.
- Ensure the reading order is logical.
- Ensure content is understandable and usable.
- Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
- Using the Web Developer toolbar or WAVE, ensure the alternative text is equivalent and that it makes sense in context. In WAVE, alternative text is displayed next to the image.
- Look for images of text where the same presentation can be accomplished using true text.
Verify Color and Contrast
- Contrast: webaim.org/resources/contrastchecker/ or in WAVE
- AA Levels: 4.5:1 or 3:1 for big text (18pt/14pt bold).
- If links are not underlined, there must be 3:1 contrast between link text and body text and all text must still meet other contrast requirements. There also must be an additional change (e.g., underlining) when it is hovered over or receives keyboard focus.
- Ensure color is not used as the sole method of conveying content or distinguishing visual elements.
- Print on a grayscale printer to test contrast and color.
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?
- Safari: View > Zoom Text Only
- Firefox: View > Zoom > Zoom Text Only
- Internet Explorer: View > Text size
- Zoom the web page in your browser (enlarge fonts and images). Is text in images readable?
- Ensure that the main heading on the page is an <h1>.
- Look for skipped levels (e.g., <h2> to <h4>).
- In WAVE: Headings can also be viewed in the Outline tab in sidebar.
Test with a Screen Reader
Validate HTML and CSS
Not essential, but recommended
- Check videos and other multimedia for captions and transcripts.
- Ensure the page <title> is unique and descriptive.
- Look for links with generic link text like "click here."
- Verify that the page language is specified (e.g., <html lang="en">).
- Make sure instructions do not rely on shape, size, or location.
- Ensure that animating or updating content or media can be paused and stopped.
- Look for strobing content that could cause seizures.