The easiest way to perform an accessibility audit on your webpage is just to use a tool already built-in into Chrome browser — Chrome DevTools. Just:
- Open the Chrome Browser
- Use
ctrl + shift + Ion Linux/Windows orcmd + shift + Ion Mac to open the DevTools panel, - go to the Lighthouse tab,
- tick Accessibility checkbox,
- decide which version (desktop or mobile) you want to test,
- click the
Generate Raportbutton.
After some seconds you will receive the report (like in the picture below) with the most important data.
OK, so what have we got here? First of all, our webpage is scored on a scale of 1–100. A score below 50 is considered bad, 51–89 medium and 90–100 is the score we want to achieve. But the number is not all. The most important thing in that audit is the list of failing audits — visible just below the main score. When you click on one of the audits and expend details, you will receive much more data — e.g. a link to an article where you can learn more about a given problem and a list of failing elements.
What’s more — when you click on the failing element you will be redirected to it in the Source tab where you can find more info about the element and where you can play with its CSS or attributes.
Each section should have also a learn more link with reference to article explaining why it's important and how to fix it. Definitely worth checking!
Personally, I strongly recommend checking not only the section with failed audits but also the passed ones — thanks to that you can learn what is important and improve your skills.
Note: Unfortunately, automated tools are not perfect - they find only around 57% of problems connected with accessibility. Please, remember about manual tests on your webpage - especially after big refactors and changes in navigation. But the Lighthouse audit is a great starting point to improve your webpage. And trust me - you can learn from those reports a lot!
Happy coding!
Top comments (1)
This article was curated as a part of #52nd Issue of Software Testing Notes newsletter.