As a Front-end developer, making a web application accessible is one of the primary goals. To make sure people with visual impairments can also use the application without much hassle, we need to make it accessible. And a lot of projects have Accessibility Testing as their mandatory requirement.
So how to check for accessibility issues in a web application and fix them? Well, below, we will see how you can quickly test your application and fix the accessibility issues.
Tools for Testing Accessibility
There are a lot of open-source and paid tools to test the accessibility of a web application. In this article, we will see the 3 most used open-source tools.
1. Google Lighthouse
- Open Developer tools in Google Chrome Browser (right-click + inspect)
- Go to the Lighthouse tab
- Under the “Categories” section select the Accessibility checkbox
- Select a device type
- Click on “Generate Report”
Google Lighthouse will give an accessibility score out of 100. It will also give a list of errors that needs to be fixed.
2. Axe Dev Tools
- Go to Google Chrome Web Store
- Search for Axe Dev Tool
- Add it to your Chrome Browser
- Open Developer tools in Google Chrome Browser
- Go to the Axe DevTool tab
- Click on “Scan All of My Page”
It will give you a list of accessibility errors in your application.
3. WAVE by WebAIM
- Go to Google Chrome Web Store
- Search for WAVE Evaluation Tool
- Add it to your Chrome Browser
- Right-click on your web application
- In the context menu click on “WAVE this page”
It will give you a list of accessibility errors in your application.
Although these tools can test most of the accessibility issues, a manual check is also recommended. A quick reference on WCAG 2.1 checklist can be found at WCAG2.1 Quick Reference
Happy Coding!
About the Author:
Nitish Kumar is a Senior Front End Developer here at Version 1.
