How to use the Chrome Inspector for Accessibility Audits?

Website accessibility audit is essential to thoroughly identify accessibility issues on the site that can prevent it from being used by people living with disabilities. To this, one must conduct a comprehensive audit of the website to test against ADA compliance, 508 compliance, following the web content accessibility guidelines 2.1 checklist.

There is automated accessibility testing and manual accessibility testing. Automated testing quickly helps us to learn the different reasons why persons with disabilities might encounter problems on the site. It however has its limitations. Only about 30% of the WCAG 2.1 success criteria can be tested with an automated testing tool. This is why manual functional testing is essential to determine web accessibility. Manual and functional testing requires human expertise to check automated tests and navigate the website as a disabled person would. A good audit that would cover the full scope can only be achieved with a combination of technology and real people who access the web using assistive technologies. 

Another winning audit tool is WAVE Testing . Read our review 🏆

Like many other automated testing tools, the Google Lighthouse tool is an open-source, automated accessibility testing tool among the suite of checks that can be done using the Chrome Developer Tools. Other than accessibility, the Chrome Inspector can be used to check performance, SEO, and other best practices.

The Chrome DevTools automatically identifies accessibility issues on your web pages and signals them for necessary improvements to make them accessible to people with disabilities. Intended for web developers, testers, and business teams who are familiar with accessibility principles and want to ingrain its best practices in development for accessibility compliance, the Google Chrome Dev tool has built-in accessibility audits in the Lighthouse Audits panel.

Although there are different ways to automate your Lighthouse runs (e.g. Chrome Extension), this article focuses on how to use the free built-in accessibility testing feature in the Google Chrome browser. Let’s examine how to evaluate a web page for accessibility compliance.

Google Chrome LightHouse for Accessibility Audit

Google has made accessibility quite easy with its Chrome DevTools. To access the Google Chrome accessibility testing feature (audit panel) directly on any page you want to test:

• Download Google Chrome for Desktop.
• Open the web page to be evaluated on your Chrome browser. 
• Press the F-12 key or right-click and select the “Inspect” option. Alternatively, use Cmd + Shift + C on Mac, or Ctrl + Shift + C or Ctrl + Shift + I on Windows.
• Your pointer should be on Inspect Element mode, go ahead and click an element on the webpage.

Inspecting elements on your chosen web page with the DevTools can’t get easier. Navigate with the More tabs button “>>” to open Google Lighthouse in case the tab is hidden. Google Lighthouse is based on ax-core technology developed by Deque Systems and it has several options for improving the quality of web pages including accessibility. Let’s explore the open-source automated tool to audit the page and find out if the web page is properly marked up for screen readers.

Lighthouse immediately shows you various configuration options to perform an audit. The viewport of the page to be audited is on the left while the Lighthouse-powered Audits panel of Chrome DevTools is on the right.

Note: The screenshots in this section are taken with version 88 of Google Chrome. The console drawer panel UI looks different in earlier versions of Chrome, but the general workflow is the same. This version allows you to jump straight into Lighthouse for audit.

From the various configuration options, ensure to check the Accessibility check box. I have disabled the other categories here but you can leave them checked if you want to include them in your report. 

On clicking the Run Audits button, DevTools loads and provides an accessibility report after 10 to 30 seconds. The report comes in a user-friendly format and gives you various tips on how to improve the web page’s accessibility and subsequently, the general accessibility score as shown below.

There! The automated accessibility audit allows you click on errors to learn more about them. 

Clicking Learn More will allow you to view that audit’s documentation in a new tab – the web developer reference doc. This is a highlight of the continuous improvements on the Chrome Inspector. The web developer documentation in this error case for example explains how to add accessible names to buttons. As expected, each audit has a web developer reference documentation explaining the importance of the audit, as well as how to fix the error.

Implementing these suggestions will however improve the website’s accessibility and accessibility score when you re-run the accessibility audit.

In the case of this audit, the audit documentation for ensuring buttons have an accessible name specifies:

• How the Lighthouse button name audit fails
• How to add accessible names to buttons (for buttons with visible and invisible labels)
• Resources

Lighthouse allows some sharing options, including JSON files. All you have to do is click the tools menu to share.

Conclusion

Google Dev Tools offers a very easy-to-use and extremely sophisticated accessibility audit facility. The Lighthouse Audits documentation pages are very instructional by default and offer suggestions to improve website accessibility in a manner that is succinct and easy to implement. Highly recommended for beginners before moving to the Accessibility pane.