This is a guest post by Kameshwari Devi Kiran Kumar
This article briefly explanes how to use the WAVE tool to test accessibility for a website. There are primarily two methods of using the tool:
- Entering the URL of the website you would like to test into the ‘Webpage address’ textbox given for the purpose at
and hitting the ‘Wave’ button to see the results.
- Downloading the extension from the ‘Webaim’ site from the below URLs:
Chrome: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
Steps to download and use the tool:
- Go to the above URLs.
- Activate the ‘add to Chrome’ or ‘Add to Firefox’ button depending on the browser you are working with.
- Activate the ‘add to extensions’ button.
- Once the extension is added to Chrome / Firefox, open the webpage you would like to test and activate the ‘Wave’ button next to the browser address bar or press ‘Control+Shift+U(Command+Shift+U in case of MAC)’ to fetch the report.
Wave report and features:
The tool runs an accessibility check and displays icons representing the search results.
- The default results page shows you a summary in the sidebar. It lists errors (red icons), alerts (yellow icons), features (green icons), structural elements
(blue icons), HTML5 and ARIA elements (lavender icons), and contrast errors (which don’t show up as icons).
- Above the summary results are buttons to let you look at the page with no styles, or to view only the contrast errors.
- To the left of the summary panel, you can opt to see details, documentation,
or an outline of the page structure. On the right, where your web site is pictured, you can click on any icon to get a brief explanation and a link to more information.
- You can look at the code for the icons mention by clicking the ‘code’ tab at the bottom. The code panel shows you the code related to any icon you click on the page of WAVE tool results
Leave a comment