This guide aims to help users who primarily rely on assistive technology (AT), such as screen readers, access and use Chrome DevTools. Chrome DevTools is a suite of web developer tools built into the Google Chrome browser. Review the Accessibility Reference if you're looking for DevTools features related to improving the accessibility of a web page.
The accessibility of DevTools is a work-in-progress. Some panels and tabs work better with AT than others. This guide walks you through the panels which are the most accessible and highlights specific issues you may encounter along the way.
Overview
DevTools is divided into a series of panels which are organized into an
ARIA tablist. For example:
- The Elements panel lets you view and change DOM nodes or CSS.
- The Console panel lets you read JavaScript logs and live edit objects.
Within the content area of each panel, there are a number of different tools, often referred to as tabs or panes in the documentation. For example, the Elements panel contains additional tabs to inspect event listeners, the accessibility tree, and much more. The distinction between tabs and panes is somewhat arbitrary. The only reason you'll see one term or the other is to maintain consistency with the rest of the official DevTools documentation.
Keyboard shortcuts
The DevTools Keyboard Shortcuts reference is a helpful cheatsheet. Be sure to bookmark it and refer back to it as you explore the different panels.
Open DevTools
To get started, read through Open Chrome DevTools. There are a number of ways to open DevTools, either through keyboard shortcuts or menu items.
Navigate between panels
You can navigate between panels by keyboard, the Command Menu, or using a mouse or trackpad.
Navigate by keyboard
- With DevTools open, press Control+] or Command+] (Mac) to focus the next panel.
- Press Control+[ or Command+[ (Mac) to focus the previous panel.
- It's also possible to use Shift+Tab to move focus into a
panel's
tablistand use the arrow keys to change panels, though it may be faster to use the previously mentioned shortcuts.
Known issues
- Some panels, such as the Console and Performance panels, may move focus into their content area as soon as they are activated. This can make navigating by arrow keys difficult.
- The selected panel's name is announced, but only after a screen reader has read the focused content in the panel. This can make it very easy to miss.
Navigate by Command Menu
To focus a specific panel, use the Command Menu:
- With DevTools open, press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu. The Command Menu is a fuzzy search autocomplete combobox.
- Type the name of the panel you'd like to open, then use the