Accessibility Auditing

Introduction

By now you should feel confident enough to start making your websites a little more accessible for a lot of users. What can really help you make sure you’re implementing certain a11y features correctly, though, is learning how to view the accessibility tree in your DevTools and how to audit your web pages for any outstanding a11y issues.

This lesson covers both Chrome and Firefox, since there is a significant enough difference between both browsers’ accessibility DevTools. Since Microsoft Edge is now Chromium-based (as of versions released in January 2020 and after), many if not all accessibility features for the Chrome DevTools mentioned in this lesson should also work in Edge.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Open the accessibility section within your browser’s DevTools.
  • Audit a web page with a third party auditing tool.

Accessibility DevTools

Using your browser’s DevTools is beyond useful for several things, from checking the styles applied to a page to debugging code, but you already know that! Here’s something you may not know: you can even use the DevTools to look at various accessibility features as well, which can be great as a sort of “quick audit”. You can check contrast ratios (as we mentioned in a previous lesson), view various accessibility properties, and view the accessibility tree, to name a few features.

Accessibility Auditing

There are plenty of third party tools to audit the accessibility of a web page, each with their own pros and cons, though we’re only going to mention three of those tools here. By getting into the habit of auditing your web pages, you’ll be able to track down any outstanding a11y issues that you may have missed. If you decide to utilize one of these tools, or another auditing tool if you prefer one you come across, you should focus on fixing issues related to the concepts introduced in these lessons only for now.

  • axe DevTools for Chrome and axe for Firefox are extension-based tools that return a list of issues ranked by severity level, and will note any issues for you to manually check.

  • Lighthouse for Chrome is available in the Chrome DevTools by default (it might also be listed as the Auditing tab) or it can be ran from the command line. The Lighthouse Firefox Addon is also available. Lighthouse provides more than just a11y auditing, including performance, best practices, search engine optimization (SEO), and progressive web app (PWA) if applicable. Any issues will be separated by category, and like the axe DevTools there may be a list of issues for you to manually check.

  • WebAIM’s WAVE is a website based tool where you enter the URL of the page you want to audit, though there are also browser extension and API options. WAVE will return a preview of the page with an overlay if icons on it, and issues are separated into categories of alerts, warnings, and contrast errors. Unfortunately the icons that are placed on the page may cause the layout to break, but that could be a minor issue if you’re more focused on the a11y issues that are found.

Of course, one of the best ways to check the accessibility of your websites is to get feedback from users who rely on these accessibility features. Obviously this isn’t always an easy option, but when you can it will be worth hearing from those who may be affected by your site’s accessibility (or lack of it).

Assignment

  1. If your primary browser is Chrome, read the following resources:
    • Accessibility features reference, starting from the Accessibility pane section, provides a brief overview of Chrome’s accessibility features in the DevTools.
    • Emulate vision deficiencies from the Chrome 83 update page.
    • The Open the Issues tab section. You can ignore any mentions of anything that isn’t accessibility related on this page, as we just want you to know how to open this tab in your DevTools. Once you do, you’ll be able to see a11y issues in addition to any other issues found.
    • Although there will be differences between the browsers, such as the value of the role property or how a11y properties are presented, also check out the “Features of the Accessibility panel” section mentioned below for MDN’s documentation. There is some useful information that, while more tailored to Firefox, can still be useful to a Chrome user.
  2. If your primary browser is Firefox, read through the following sections on MDN’s Accessibility Inspector:
    • “Features of the Accessibility panel”: Focus only on the name, role, value, description, states, and relations properties. For Chrome, states are presented within the Computed Properties of the Devtools, and relations are listed as several properties within the name property (aria-labelledby, aria-label, etc.).
    • “Check for accessibility issues”
    • “Simulate”
    • “Accessibility picker”

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

  • Involving Users in Evaluating Web Accessibility goes over some helpful steps to take when you can get feedback from users.
  • The WCAG Quick Reference provides a list of success criteria along with techniques for how to satisfy them and links to understanding them in more detail. This tool is a great go-to when you’re really ready to push your website to the next accessible level. If you often use animations, success criterion 2.2.2 (“Play, Stop, Hide”) and all of the 2.3 success criteria are definitely worth reading.
  • A11ycasts Playlist. We’ve included several videos from this playlist in these lessons, but there are other videos worth checking out for various accessibility topics.
  • screenreader-outputs is a GitHub repo that contains many examples of screen reader outputs. Sometimes nested elements or certain combinations of attributes and native labeling may result in accessible names or descriptions that are difficult to make sense of, so checking out this repo may help clear things up.
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord