Do an Accessibility Audit using Google Chrome LightHouse

Saptarshi Katwala
accessibility-a11y
Published in
3 min readApr 13, 2019

--

Introduction: In the past few years there have been many tools and browser extensions which allow developers, testers and business teams to review their web assets for accessibility compliance. This article reviews the out-of-the-box built in features in Google Chrome browser that enable such reviews.

Google Chrome Accessibility review features:

Open any page in Google Chrome and press either the F-12 key or right click and select “Inspect” option as shown in screen shot below.

This opens the Chrome Dev Tools. If we select the “Audits” option, we get the screen that may look similar to the one shown below.

The audits feature which is based on LightHouse technology has several options for improving the quality of web pages including accessibility. This accessibility check feature uses axe-core technology developed by dequeue systems.

Using LightHouse Audits in Chrome to test a page for Accessibility:

Consider a very simple web page as shown below.

Let us run this on a web server (as Google Chrome Audit tools for accessibility will require page running on web server). Once this done, the page will look like so:

Now click Inspect and open dev tools and go to Audits like so:

Only check the Accessibility check box and click the run audits button. We will get an accessibility score as shown below:

We get a score of 30 — which is somewhat low. The neat thing about this audit is that it gives the developer very powerful suggestions on how to improve the accessibility score. Let us review the suggestions offered.

The suggestions to increase the score are :

  1. To have a <title> element which is a desirable feature for screen readers.
  2. Specify Language — again this is immensely helpful to assistive technology such as screen readers
  3. Image not having the alt attribute. The assistive technology will narrate the information in the alt attribute so that a user with seeing difficulty can understand the content.

Let us implement these suggestions. These are shown in the code below:

We have made the following 3 changes per the earlier recommendation by Audit Accessibility test.

  1. Added the language attribute on line 2
  2. Added title (line 4, also added head tag recommended for title, lines 3 and 5)
  3. Added alt tag on line 9

Now let us refresh this page in the browser and re-run Accessibility audit.

This time the score goes to 100% meaning that the page is consistent with industry standard best practices for accessibility.

Conclusion: Google Dev Tools offers a very easy to use and extremely sophisticated Audit facility for Accessibility. The suggestions offered to improve accessibility are very relevant and presented in a manner which is easy to implement.

--

--

Saptarshi Katwala
accessibility-a11y

I am a software developer/applications architect. I have a special interest in Web Accessibility.