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 is an accessibility evaluation tool that facilitates human evaluation by embedding inline accessibility feedback into your web content.
- Dynamic or protected content can be evaluated with the WAVE Chrome extension.
- Icons identify potential problems or features. Click an icon to highlight the corresponding element and get more information.
- Use the panel to review page issues. Click on an icon to find it in the page. Uncheck icons to hide them.
- reading order for screen readers. view can be used to simplify the page view and to check
- Click on the button at the bottom of the page to reveal a code inspector.
- The image
altattribute value is displayed next to the image.
- Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
- Look for images of text where the same presentation can be accomplished using true text.
- View headings in the tab in the sidebar.
- Ensure visual headings are marked up as true headings.
- The main heading should usually be an
- Look for skipped heading levels (e.g.,
HTML5 and ARIA
Other common WAVE checks
- Page language is specified (e.g.,
- If data tables are present, ensure table headers are present and have the correct scope.
Check Keyboard Accessibility
- To toggle Mac keyboard accessibility press Control + F7.
- Navigate the page using only the keyboard:
- Tab: Navigate to links and form controls.
- Shift + Tab: Navigate backwards.
- Enter: Activate links and buttons.
- Spacebar: Activate checkboxes and buttons.
- Arrow keys: Radio buttons, select/dropdown menus, sliders, tab panels, autocomplete, tree menus, etc.
- Is anything mouse-only (e.g., rollover menus)?
- Is a "skip navigation" link available? Activate the skip link and hit Tab again to ensure it functions correctly.
- Is the navigation order logical and intuitive?
- Is a visible keyboard focus indicator/outline present?
- Test dialogs that 'pop' open. Can you navigate and close the dialog? Does focus return to a logical place?
- Modal dialogs maintain focus until dismissed.
- Non-modal dialogs close when focus is lost.
- Esc should also close all dialogs.
Test Content Scaling
- Enlarge the font in your web browser to ~150%. Is the page content readable and usable? Is horizontal scrolling minimized?
- Safari: >
- Firefox: > >
- Internet Explorer: >
- Zoom the web page in your browser (enlarge fonts and images) to at least 200%. Is text in images readable?
- Zoom sometimes triggers responsive 'mobile' views.
Test with a Screen Reader
Scan for Other Issues
- Check media for captions and transcripts.
- Ensure the page
<title>is unique and descriptive.
- Look for links with ambiguous link text like "click here."
- Make sure information does not depend on color, audio, shape, size, or location.
- Ensure that animating or updating content or media can be paused and stopped.
- Look for strobing content/video that could cause seizures.