SUBSCRIBE
NOW!

The new way to test accessibility with Chrome DevTools - A11ycasts #23

Google Chrome Developers

Fri. Aug. 18, 2017 1:00pm

Chrome version 60 ships with an exciting new DevTools feature called Audits 2.0. This panel replaces the previous Audits panel with a new set of tests powered by Lighthouse. Lighthouse is a tool which checks for various performance and best practice metrics, including accessibility. Under the hood, these accessibility tests are powered by aXe, the open source accessibility engine from the folks at Deque.

Today on A11ycasts I'll show you how to get started with Audits 2.0 by checking a sample site for some common accessibility issues.

It's important to note that a tool like the new Audits panel can only really check for a subset of accessibility issues (basically anything that can be automated). There are still a number of areas that this tool can't test, so make sure you're manually checking your site as well. Here's a helpful guide if you're not quite sure how to manually check for accessibility issues: https://goo.gl/2xUPh2

Command palette in DevTools: You can open this with cmd-shift-P or ctrl-shift-P on Windows.

New Audits panel, powered by Lighthouse: https://goo.gl/Nsp7wB

Automated testing with aXe: https://goo.gl/QmBy9d

Note at around 3:23 I show a feature where you can click on a node in the Audits panel and inspect it in the Elements panel. This feature is still a little buggy. You can track the issue here: https://goo.gl/ugtVgu

Watch all A11ycasts episodes: https://goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf