Quick Reference
Testing Web Content for Accessibility

You are here: Home > Resources > Quick Reference: Testing Web Content for Accessibility

Note

This resource is designed to be printed as a one page PDF file. An HTML version is also available below.

Test with WAVE

Run a report at wave.webaim.org. For very complex or non-public pages, use the the WAVE Chrome or Firefox extension.
- Watch the overview video on the WAVE homepage.
Error icons flag known issues. Other icons identify potential problems or features. Click an icon to highlight the corresponding element and learn more using the Reference panel.
Use the Details panel to review page issues. Click an icon to find it in the page. Uncheck icons to hide them.
Turn off Styles to simplify the page view and to check the reading and navigation order.
Click the Code button at the bottom of the page to see the page code with WAVE icons.

Ensure alternative text (shown in green) conveys the equivalent content and/or function of the image.
Look for ways to replace images of text with true text.
Content conveyed via CSS images must have a text alternative.

Select the Contrast panel.
- WAVE flags WCAG AA contrast issues in text.
- Non-underlined links need 3:1 contrast with body text, plus a change, like underlining, on hover and focus.
Check colors in WebAIM's contrast checker.
Manually check contrast in icons and images.

WAVE flags ARIA with purple icons.
Check for appropriate use of ARIA roles, states, and properties (presented in green).
Ensure ARIA labels and descriptions are correct.

Page language is specified (e.g., <html lang="en">).
If there are data tables ensure table headers are present and have the correct scope.
Look for links with ambiguous link text like "click here."
Ensure the page title is descriptive and succinct.

The first time testing with Mac, press Control + F7 to enable full keyboard accessibility.
- In Safari, select Preferences > Advanced > Accessibility > Press Tab to highlight each item…
Navigate the page using only the keyboard:
- Tab: Navigate interactive elements (links, form controls, etc.)
- Shift + Tab: Navigate backwards.
- Enter: Activate links or buttons, submit most forms.
- Spacebar: Activate checkboxes and buttons, expand a select menu, or scroll the window.
- Arrow keys: Navigate radio buttons, select/dropdown menus, sliders, tab panels, tree menus, etc.
Look for mouse-only interaction (e.g., rollover menus).
Confirm every focusable element has a keyboard focus indicator/outline with at least 3:1 contrast.
Ensure any "skip" links work correctly and are visible to sighted keyboard users.
Make sure the navigation order is logical and intuitive.
Test dialog and pop-ups. Can you navigate and close the dialog? Does focus return to a logical place?
- Modal dialogs must maintain focus until dismissed.
- Non-modal dialogs must close when focus is lost.
- Esc should also close all dialogs and menus.

In Chrome, press Ctrl/cmd and:
- + to zoom in (larger)
- - to zoom out (smaller)
- 0 to reset to 100%
For WCAG 2.0 - Zoom to 200%
For WCAG 2.1 - Adjust viewport to 1280 pixels wide and zoom to 400%. Avoid horizontal scrolling unless required for the content (e.g., a data table or map).
Text-only zoom (Recommended) - In Firefox, choose View > Zoom > Zoom Text Only. Zoom to 130-150%