This page is a comprehensive reference of accessibility features in Chrome DevTools. It is intended for web developers who:
- Have a basic understanding of DevTools, such as how to open it.
- Are familiar with accessibility principles and best practices.
The purpose of this reference is to help you discover all of the tools available in DevTools that can help you examine a page's accessibility.
See Navigating Chrome DevTools With Assistive Technology if you're looking for help on navigating DevTools with an assistive technology like a screen reader.
See Learn Accessibility if you'd like to learn how to develop accessible websites.
Overview of accessibility features in Chrome DevTools
This section explains how DevTools fits into your overall accessibility toolkit.
When determining whether a page is accessible, you need to have 2 general questions in mind:
- Can I navigate the page with a keyboard or screen reader?
- Are the page's elements properly marked up for screen readers?
In general, DevTools can help you fix errors related to question #2, because these errors are easy to detect in an automated fashion. Question #1 is just as important, but unfortunately DevTools can't help you there. The only way to find errors related to question #1 is to try using a page with a keyboard or screen reader yourself. See How To Do An Accessibility Review to learn more.
Audit a page's accessibility
In general, use the accessibility checks under the Lighthouse panel to determine if:
- A page is properly marked up for screen readers.
- The text elements on a page have sufficient contrast ratios. See also Make your website more readable.
To audit a page:
- Go to the URL that you want to audit.
In DevTools, click the Lighthouse panel. DevTools shows you various configuration options.