Accessibility Testing with a Chrome Extension

Introduction

An accessible website ensures that all users, regardless of their physical or cognitive limitations, can navigate and interact with its content.

Accessibility addresses issues faced by people with impairments, such as:

• visual impairments (requiring screen readers or high contrast)
• hearing impairments (requiring captions for audio content)
• mobility challenges (navigating without a mouse)
• cognitive disabilities (requiring clear and consistent layouts).

Web Content Accessibility Guidelines are the gold standard for web accessibility, offering a comprehensive set of standards to ensure websites are usable by everyone.

Even with these standards, testing for accessibility can be challenging, particularly when done manually. The good news? Many aspects of accessibility testing can be automated.

Let's get started with a Chrome browser extension, and a website that could really use some help with accessibility.

axe DevTools extension for Chrome

A number of browser extensions are available to help you test for accessibility issues. One of the most popular is the "axe DevTools" extension for Chrome. This tool allows you to run accessibility checks right in the browser and view the results in an easy-to-understand format.

axe DevTools unlocks more features with a Pro subscription, but the free version is still quite powerful. Everything we'll be doing here can be done with the free version.

Enough chatter, let's see how this works!

The website

I want to take a look at this page and see what kind of accessibility issues I can find. The page is specifically designed to have lots of accessibility issues, so it's a great place to start. It looks like this:

Install the extension

Install the axe DevTools extension from the Chrome Web Store. Once installed, you can start it by selecting axe DevTools from the Chrome Developer Tools menu:

And it will load, like this!

Running a scan

Once you have the extension loaded, you can click the "Full Page Scan" button to run a scan on the entire page. This will check for a variety of accessibility issues and display the results in the panel, like this:

You can see above there are a total of 50 issues, with 12 of them being critical. I'm going to click on the hyperlinked "12" to filter just the 12 critical issues:

Alt-text issues

OK now it's starting to get interesting. Our first problem is we have two images with no alt-text. This is a big no-no for accessibility, as screen readers rely on alt-text to describe images to users who can't see them.

When I click on the "Images must have alt-text" link above, I see this:

There is great info here. You can see:

• the flagged element location in the DOM
• actionable steps to address the issue
• highlighted element on the page (pink border)

Form field issues

Let's look at our other critical issues. The next issue is "form fields without labels". This is a big deal because users who rely on screen readers need to know what each form field is for. If the form field is missing a label, or the label is not descriptive, it can be very confusing. Looks like we have 10 of those issues.

In our first example, we have the Name field, and just looking at it visually, it does appear to have a label. But the label is not connected to the input field in the DOM. This is a common issue with forms, and it's easy to fix.

You can see the problem element in the DOM, and the highlighted element on the page. The actionable steps tell you to connect the label to the input field.

Wrap-up

So there you have it, some basics about how to use the axe DevTools extension to identify and fix accessibility issues.

Also, along the top of the page you wil see an "After" button that can show you a version of the page with all of the issues addressed, and 0 accessibility issues found in the scan.

Finally, we looked at the 12 critical issues, but remember there are 50 total issues, and this is just for one page! Imagine how many issues you might find on a large site, especially one that has not been designed with accessibility in mind.

In addition to the browser extension, we can do accessibility testing in the CI pipeline with tools like Playwright. This approach ensures we catch these issues before they reach our codebase or get deployed to production. I'll cover that in my next blog post, so stay tuned!