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.
By the end of this lesson, you should be able to:
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.
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.
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).
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.