DEV Community

Dominika Zając (she/her) 🇵🇱
Dominika Zając (she/her) 🇵🇱

Posted on

How to perform accessibility audit of your webpage without installing any tools

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 + I on Linux/Windows or cmd + shift + I on 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 Raport button.

After some seconds you will receive the report (like in the picture below) with the most important data.

Example report after performing accessibility audit in Chrome DevTools

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!

Section with title "Contrast - these are opportunities to improve the legibility of your content", subtitle "Background and foreground colors do not have a sufficient contrast ratio" and text "Low-contrast text is difficult or impossible for many users to read. Learn more link". Below you can see 2 HTML buttons with theirs ids.

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)

priteshusadadiya profile image
Pritesh Usadadiya

This article was curated as a part of #52nd Issue of Software Testing Notes newsletter.