How to Check Web Accessibility with Lighthouse

Accessibility should be a top priority for developing new tech. There are many tools available to check whether or not your website is accessible. These tools can score and log accessibility errors that are present on your website. One of those tools is Lighthouse. Lighthouse is a free chrome extension that was developed by Google.

As stated on their website;

“Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.” (Lighthouse)

Lighthouse can be downloaded for free at the following link and can be used as a chrome extension. After downloading Lighthouse, you can run reports on specific web pages.

https://developers.google.com/web/tools/lighthouse

Steps to get started:

First, download Lighthouse as a chrome extension at this link. This chrome extension is free.

Once downloaded, you can pin it next to your browser. This will make it very easy to run the necessary tests.

Next, got to a page you want to audit. Click on the Lighthouse icon on your browser. Then click on “Generate Report”.

After you click on Generate Report, Lighthouse will take a few minutes to generate a report for you. Lighthouse will open a new page that documents how well your page is.

Lighthouse scores 5 different aspects of your page; Performance, Accessibility, Best Practices, SEO and PWA. Developers can look at how their website scores in each of these categories. Today, we will look at accessibility.

To demonstrate Lighthouse, I’ve audited CSS-Tricks. On the CSS-Tricks home page, accessibility received a score of 97. You can scroll down to look at accessibility errors. CSS-Tricks home page has one accessibility error, which is, “Background and foreground colors do not have a sufficient contrast ratio. Underneath, it explains why this is an accessibility issue by stating, “Low-contrast text is difficult or impossible for many users to read”. Lighthouse even links a URL for the developer to learn more about this particular accessibility problem.

In the screenshot above, you can see that Lighthouse took a screenshot of areas that have this accessibility problem, along with the code associated with this section. Lighthouse not only reports the accessibility error, but it also takes screenshots of which elements do not pass accessibility along with the correspondent code, why the problem is an accessibility error, and how to fix it. Lighthouse also allows users to learn more about the specific accessibility issue so they can prevent this issue from happening in the future.

We should be testing multiple pages when we run an accessibility audit because some pages might have problems others do not.

For example, CSS-Tricks home page only had one accessibility error. The article page had the “Background and Foreground colors do not have sufficient contrast ratio” error and another problem, which was “Heading elements are not in a sequentially-descending order”. Again, Lighthouse provided the error, explained why the issue occurred, showed where this was failing to help developers fix this accessibility error. Lighthouse explained this accessibility error, “Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technology.”

Tools like Lighthouse can help developers see accessibility errors that their page is generating. We can see the element’s accessibility is failing, we can learn about why the problem is occurring, and most importantly, we can learn how to fix it. These tools can broaden our understanding of accessibility.

These tooltips can improve our understanding of accessibility and can prevent future problems from occurring.