 Rob Dodson [X](https://twitter.com/rob_dodson) [GitHub](https://github.com/robdodson) [Homepage](https://robdodson.me)
This guide aims to help users who primarily rely on assistive technology (AT),
such as screen readers, access and use [Chrome DevTools](https://developer.chrome.com/docs/devtools). Chrome DevTools is
a suite of web developer tools built into the Google Chrome browser. Review the
[Accessibility Reference](https://developer.chrome.com/docs/devtools/accessibility/reference.md.txt) 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`](https://www.w3.org/TR/wai-aria-1.1/#tablist). For example:
- The **Elements** panel lets you view and change [DOM nodes](https://developer.chrome.com/docs/devtools/dom.md.txt) or [CSS](https://developer.chrome.com/docs/devtools/css.md.txt).
- The [**Console** panel](https://developer.chrome.com/docs/devtools/console.md.txt) 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](https://developer.chrome.com/docs/devtools/shortcuts.md.txt) 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](https://developer.chrome.com/docs/devtools/open.md.txt). 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 `tablist` and 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**](https://developer.chrome.com/docs/devtools/command-menu.md.txt):
1. 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.
2. Type the name of the panel you'd like to open, then use the Down Arrow keyboard to navigate to the correct option.
3. Press Enter to run a command.
For example, to open the **Elements** panel:
1. Open the **Command Menu**.
2. Type E then L. The **Panel \> Show Elements** option is selected.
3. Press Enter to run the command that opens the panel.
Opening a panel this way directs focus to the contents of the panel itself. In
the case of the **Elements** panel, focus moves into the **DOM Tree**.
## Elements panel
### Inspect an element on the page
1. Navigate to the element you want to inspect using the screen reader's cursor.
2. Simulate a right-mouse click on the element to open the context menu.
3. Choose the **Inspect** option. This opens the [**Elements** panel](https://developer.chrome.com/docs/devtools/dom.md.txt) and focuses the element in the **DOM Tree**.
The **DOM Tree** is laid out as an [ARIA `tree`](https://www.w3.org/TR/wai-aria-1.1/#tree). See an example in
[Navigate the **DOM Tree** with a keyboard](https://developer.chrome.com/docs/devtools/dom.md.txt#keynav).
### Copy the code for an element in the DOM Tree
1. With focus on a node in the **DOM Tree**, bring up the right-click context menu.
2. Expand the **Copy** option.
3. Select **Copy outerHTML**.
#### Known issues
- **Copy `outerHTML`** often selects the parent node, instead of the intended node. However, the contents of the element should still be in the copied within `outerHTML`.
### Modify the attributes of an element in the DOM Tree
- With focus on a node in the **DOM Tree** , press Enter to make it editable.
- Press Tab to move between attribute values. When you hear "space" you are inside of an empty text input and can type a new attribute value.
- Press Control+Enter or Command+Enter (Mac) to accept the change and hear the entire contents of the element.
#### Known issues
- When you type into the text input, you won't get feedback. If you make a typo and use the arrow keys to explore your input, you won't get feedback. The easiest way to check your work is to accept the change, then listen for the entire element to be announced.
### Edit the HTML of an element in the DOM Tree
- With focus on a node in the **DOM Tree** , press Enter to make it editable.
- Press Tab to move between attribute values. When you hear the element's name, for example, `h2`, you are inside of a text input and may change the element's type.
- Press Control+Enter or Command+Enter (Mac) to accept the change.
For example, typing `h3` and pressing Control+Enter or
Command+Enter (Mac) changes the element's start and end
tags to `h3`.
## Elements panel tabs
The **Elements** panel contains additional tabs for inspecting things like the
CSS applied to an element or its place in the accessibility tree.
- With focus on a node in the **DOM Tree** , press Tab until you hear that the **Styles** pane is selected.
- Use the Right Arrow to explore other available tabs.
The **DOM Tree** turns elements with `href` attributes into focusable links, so
you may need to press Tab more than once to reach the **Styles** pane.
### Known issues
The **DOM Breakpoints** and **Properties** tabs aren't keyboard accessible.
### Styles pane
In the **Styles** pane you'll find controls for filtering styles, toggling
element states (such as [`:active`](https://developer.mozilla.org/docs/Web/CSS/:active) and [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus)), toggling classes,
and adding new classes. There is also a powerful style inspection tool to
explore and modify styles applied to the element that's in focus in the
**DOM Tree**.
The key concept to understand about the **Styles** pane is that it only shows
styles for the currently-selected node in the **DOM Tree** . For example,
suppose you're done inspecting the styles of a `` node, and now you want
to look at the styles for a `