This page will walk you through using the WAVE browser extension to evaluate a page for accessibility issues, and to get guidance on fixing those issues.
To Install the Extension:
If you haven't already done so, install the WAVE extension for your browser. Just follow the instructions on the pages linked below:
(If you prefer not to install the extension, there is also an online version of the tool.)
1. Evaluate Your Page
Browse to the web page you want to check and click the WAVE icon in your browser's toolbar
2. Review the Results
The evaluation results will display your page content with icons injected to mark errors, alerts, and structural elements.
The WAVE sidebar initially displays a Summary of results, and offers views with more detail.
- Click the Flag icon in the left sidebar to view a detailed listing of errors and alerts -- as well as elements that passed.
- Notice that when you click an Icon in the sidebar, the corresponding icon in the page cotnent wil blink. This helps you locate the problem.
- Click the "Code" bar at the bottom of the screen to reveal a view of the HTML.
- You need only be concerned with the Error and Alert indicators that appear in your content area.
3. Learn About the Issues and How to Fix Them
4. Check for Color Contrast Problems
Notice that WAVE also evaluates color contrast ratios of your page content. Click the "Contrast" button near the top of the sidebar to view that report.