What is WAVE?
WAVE is a free automatic accessibility testing tool that can help find WCAG violations, potential issues, and provide remediation guidance for your website in real time.
No automatic accessibility scanner can find all accessibility issues on your website. This means that manual testing is required to make sure your content is compliant.
Getting started with WAVE
Use the website tool
Navigate to WAVE and enter the URL of the site you want to test. A report will be generated with details about errors, features, and potential issues.
Use the browser extension
Install your preferred browser extension
After you install it, a small WAVE icon appears in your browser toolbar.
Understanding your WAVE report
Summary
The Summary panel gives you an overview of your site results and - critically - shows any immediate errors that need to be corrected. From here, you can toggle to other areas of the report and explore more of your page structure.
Details
The Details panel will most likely be where you spend the majority of your time while using WAVE. Select the “i” icon for more information about each element.
From here, you can find more information on:
- Errors - These are known issues that need to be corrected. Examples of errors might include broken skip links, images without alt text, and empty links.
- Alerts - These are potentially accessibility issues, but need a real person to double check. Examples of alerts might include skipped heading levels, broken links, suspicious alt text, and suspicious link text.
- Features - These are accessibility additions on your page. Some examples might include images with alt text, form labels, designated page language, and skip link targets.
- Structural Elements - This outlines how your page is built. You can find your tagged heading levels, your list tags, and your landmark elements here.
- ARIA - ARIA is a set of labels you can add to websites to help screen readers describe what’s on the page. It makes buttons, menus, and other web features easier to use.
Note: You can toggle all details 'on' and 'off' in your report. This makes it easier to understand all of the elements on the page and find what you are looking for.
Reference
The Reference panel is where you’ll go if you want more information about the issues listed in the Details section of your report. It explains what’s happening on your page and gives you more details about the WCAG guidelines.
Order
The Order panel breaks down exactly your page structure and what order assistive technology will interact with your page. This is helpful in making sure all of the content on your page is presented in the right order.
Confirm that the order of your content starts at the top left and moves through your page in a logical order.
Structure
The Structure panel shows how your page is organized and gives more detailed information on heading levels and landmarks.
Contrast
The Contrast panels lets you quickly review any color contrast issues that might be on your page, and test differernt color combinations.
Tips for using WAVE
- Combine WAVE with manual testing. WAVE is an automatic accessibility tester that can help get you started in your review, but can’t find all the accessibility issues on your site. A manual test is needed to find and correct all issues.
- Test multiple pages. Some issues might be on all of your pages, or can be fixed on new pages when they are added.
- Test your pages after you make updates This helps you catch and fix issues fast.
Additional Resources
- WAVE Help - WebAIM guide on using WAVE
- Manual testing - Guidance on how to test your site and make corrections