WAVE is a free and powerful accessibility evaluation tool that highlights accessibility issues directly on a web page by overlaying icons and providing explanations in context of the page.
You can use WAVE in three main ways:
- Online: Enter a page URL at wave.webaim.org.
- Browser extensions: For Chrome and Firefox, useful for testing local pages before merging to production.
- API: For integrating accessibility checks into automated workflows.
In this article, we will provide a step-by-step instructions on how to accessibility audit with the Wave Extension.
Step-by-Step: Running an Accessibility Audit with WAVE Extension
Step 1: Install WAVE
- Go to the Chrome Web Store or Firefox Add-ons page.
- Click Add to Chrome/Firefox.
Step 2: Open the Page You Want to Test
- Navigate to the webpage you want to audit.
- This can be a localhost or production page.
Step 3: Launch WAVE
- Click the WAVE icon in your browser toolbar. It will be the W sign.
- The page reloads with a sidebar panel showing results.
Step 4: Sidebar Summary
The sidebar categorizes findings into:
- Errors (red): Definite problems
- Example: missing alt text, empty headings
- Alerts (yellow): Possible issues needing review.
- Features (green): Detected accessibility elements (e.g., headings, ARIA landmarks).
- Contrast errors (blue): Low-contrast text.
You can click on “View Details” to open the details tab. The details tab provides more information on the errors seen on the Summary tab.
Looking at the details tab, we can see that the 36 errors that was shown on the Summary page is broken down to 24 “Empty Heading” error and 12 Broken ARIA reference.
Step 5: Explore On-Page Icons
Along with Summary and Details tab, Icons are overlaid on the page itself that illustrate:
- 🔴 Red error icons — critical issues.
- 🟡 Yellow alerts — potential problems.
- 🟢 Green features — accessibility features present.
- 🔵 Blue contrast errors — low color contrast.
Select an icon to open details in the sidebar.
In the image above we can see one example of a “Empty heading” error shown on the summary page. We see the location of the heading on the page. Clicking on the red icon opens a pop up with more information on the error.
Step 7: Use the Contrast Checker
- Click the Contrast tab in the sidebar.
- WAVE shows text that doesn’t meet WCAG AA/AAA contrast ratios.
- The extension will pick up the foreground and background color that was used and let the user know if there is a low contrast error on the page.
- In the example below, there is very low contrast between text and the background color. The color contrast fails to meet WCAG AA and WCAG AAA requirements.
Step 8: Validate with Manual Testing
- WAVE detects structural issues, but not the quality of solutions.
- For example, it can confirm alt text exists, but not whether it’s meaningful.
- Supplement with keyboard navigation, screen reader checks, and user testing.
Step 10: Fix and Re-Test
- Resolve flagged issues in your code.
- Re-run WAVE to confirm fixes.
Common Issues WAVE Highlights
Some frequent accessibility barriers you’ll see include:
- Missing or invalid alt text on images.
- Low color contrast between text and background.
- Empty or broken links.
- Missing form labels.
- Incorrect heading structure.
- Misuse of ARIA roles
Conclusion
Auditing with WAVE gives you immediate, visual insights into your site’s accessibility. While it won’t replace thorough manual testing or user feedback, it’s a powerful tool for catching common problems, learning best practices, and making accessibility part of your development culture.
By integrating WAVE audits into your process, you take an important step toward building a more inclusive and usable web for everyone.