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
- 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 panel.
- Use the panel to review page issues. Click an icon to find it in the page. Uncheck icons to hide them.
- Turn off to simplify the page view and to check the reading and navigation order.
- Click the 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.
Headings and Regions/landmarks
- Use the headings. panel in the sidebar to review
- The main heading should usually be an
- Ensure the headings and regions/landmarks reflect the page structure.
- Look for skipped heading levels (e.g.,
- Ensure forms controls have the descriptive labels.
Other common WAVE checks
- Page language is specified (e.g.,
- 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.
Use a Checklist
Check Keyboard Accessibility
- The first time testing with Mac, press
to enable full keyboard accessibility.
- In Safari, select
- Navigate the page using only the keyboard:
- : Navigate interactive elements (links, form controls, etc.)
- : Navigate backwards.
- : Activate links or buttons, submit most forms.
- : Activate checkboxes and buttons, expand a select menu, or scroll the window.
- : 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.
- should also close all dialogs and menus.
Test Content Scaling
, press and:
- to zoom in (larger)
- to zoom out (smaller)
- 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 , choose . Zoom to 130-150%
Test with a Screen Reader
- WebAIM tutorials: JAWS, NVDA, VoiceOver, VoiceOver on Mobile, Dolphin, Talkback, and Narrator.
- Focus on navigation, forms, and dynamic content.
- Is information presented through ARIA accurate?
- Are forms instructions and error feedback read when navigating a form?
- Are all dynamic changes and updates accessible?