Google Lighthouse: Accessibility

In our previous articles we looked at using Google Lighthouse for SEO and Performance. This article will focus on Accessibility.

Running a Google Lighthouse accessibility audit will benefit your website because it will help you understand how to make it accessible to users with visual (via a screen reader) or auditory impairments. Accessible design also enhances the overall user experience across different devices, and because accessible websites are built using semantic markup SEO is improved.

Running an audit

When you run Lighthouse, a score displaying how accessible the website is is generated. In addition to the score, the Lighthouse report also provides solutions and accessibility requirements. Below is an example to show how this works:

After running an accessibility audit a report like the following is displayed.

In this case, Lighthouse has given a score of 16. The results also provide guidance on how to improve the score, which tests were passed, and which ones weren't applicable.

Improvements

The score highlighted three key areas for improvement.

• Add a lang attribute to the html

• Add a title element to the document

• Add an alt attribute to the image element

Tests passed

In this example, the only test passed was the contrast ratio test between the background and foreground. Lighthouse also highlighted how many tests it could have done but were not applicable.

Below are the HTML improvements and the updated results following the audit:

Accessibility scoring

In Accessibility scoring, each check has an associated weight. The heavier the weighted score, the bigger effect it will have on the audit page score. Something worth noting is that you'll not get scored for partially passing an audit - you'll get 0. For example, if you have 2 input fields and one of them has a 'label' attribute but the other one doesn't, then you score 0. Lighthouse will highlight this for you when the page audit is run.

Working with Codehouse

We develop Sitecore websites with accessibility in mind. If you're looking for some guidance for your Sitecore website, we can help. Get in touch.