How to Use the WAVE Extension (Web Accessibility Evaluation Tool)
WAVE (Web Accessibility Evaluation Tool) is a browser-based accessibility checker developed by WebAIM that helps you visually identify accessibility issues and features directly on any web page. It overlays icons and indicators on a page to show where potential accessibility concerns exist, offering context and guidance for each item
- Download and Add the Wave Extension
Download the extension here.
You can install the WAVE extension in supported browsers:
– Google Chrome
– Mozilla Firefox
– Microsoft Edge
WAVE is not available for Safari.
Once installed, you’ll see the wave icon in your browser toolbar. - Activating WAVE on a Page
2a. Open any web page you want to evaluate.
2b. Click the WAVE icon in the browser toolbar.
2c. WAVE will instantly analyze the page and overlay icons and indicators to identify accessibility information. - Understanding the WAVE Interface
Once WAVE runs, you’ll see the WAVE icons on or near elements that correspond to accessibility information.
Common icon categories include:
Errors (Red): Definite accessibility issues that generally need correction.
Alerts (Yellow): Possible issues that need review.
Features (Green): Good things for accessibility (e.g., alt text present).
Structural Elements (Purple): Headings, lists, landmarks.
ARIA (Pink): ARIA roles/attributes.
Contrast (Blue): Color contrast info.
Clicking any icon highlights the element on the page and shows more details in the WAVE sidebar.
WAVE Sidebar Panels
The sidebar helps you work through the evaluation:
Summary: Overview counts of errors, alerts, features, etc.
Details: Lists every icon/type and lets you filter what’s shown.
Reference: Provides explanations and links to documentation.
Structure: Shows page regions and heading structure.
Contrast: Displays information about text color contrast.