Navigate Chrome DevTools with assistive technology

Rob Dodson

This guide aims to help users who primarily rely on assistive technology like screen readers access and useChrome DevTools.Chrome DevTools is a suite of web developer tools built into the Google Chrome browser. SeeAccessibility Referenceif 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 assistive technology 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

Before starting, it helps to have a mental model of how the DevTools UI is structured. DevTools is divided into a series ofpanelswhich are organized into anARIAtablist.For example:

  • TheElementspanel lets you view and changeDOM nodesorCSS.
  • TheConsolepanellets 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 tabsorpanesin the documentation. For instance, theElementspanel 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

TheDevTools Keyboard Shortcuts referenceis 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 throughOpen Chrome DevTools.There are a number of ways to open DevTools, either through keyboard shortcuts or menu items.

Navigate between panels

Navigate by keyboard

  • With DevTools open, pressControl+]orCommand+](Mac) to focus the next panel.
  • PressControl+[orCommand+[(Mac) to focus the previous panel.
  • It's also possible to useShift+Tabto move focus into a panel'stablist 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 theConsoleandPerformancepanels, 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 it 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 theCommand Menu:

  1. With DevTools open, pressControl+Shift+Por Command+Shift+P(Mac) to open theCommand Menu.The Command Menuis a fuzzy search autocomplete combobox.
  2. Type the name of the panel you'd like to open, then use theDown Arrowkeyboard to navigate to the correct option.
  3. PressEnterto run a command.

For example, to open theElementspanel:

  1. Open theCommand Menu.
  2. TypeEthenL.ThePanel > Show Elementsoption is selected.
  3. PressEnterto 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 Elementspanel, focus moves into theDOM 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 theInspectoption. This opens theElementspaneland focuses the element in theDOM Tree.

TheDOM Treeis laid out as anARIAtree.SeeNavigate theDOM Treewith a keyboardfor an example.

Copy the code for an element in the DOM Tree

  1. With focus on a node in theDOM Tree,bring up the right-click context menu.
  2. Expand theCopyoption.
  3. SelectCopy outerHTML.

Known issues

  • Copy outerHTMLoften doesn't select the current node but instead selects its parent node. However, the contents of the element should still be in the copied outerHTML.

Modify the attributes of an element in the DOM Tree

  • With focus on a node in theDOM Tree,pressEnterto make it editable.
  • PressTabto move between attribute values. When you hear "space" you are inside of an empty text input and can type a new attribute value.
  • PressControl+EnterorCommand+Enter(Mac) to accept the change and hear the entire contents of the element.

Known issues

  • When you type into the text input you get no feedback. If you make a typo and use the arrow keys to explore your input you also get no 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 theDOM Tree,pressEnterto make it editable.
  • PressTabto move between attribute values. When you hear the element's name, for instance, "h2", you are inside of a text input and may change the element's type.
  • PressControl+EnterorCommand+Enter(Mac) to accept the change.

For example, typingh3and pressingControl+Enteror Command+Enter(Mac) changes the element's start and end tags toh3.

Elements panel tabs

TheElementspanel 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 theDOM Tree,pressTabuntil you hear that theStyles pane is selected.
  • Use theRight Arrowto explore other available tabs.

TheDOM Treeturns elements withhrefattributes into focusable links, so you may need to pressTabmore than once to reach the Styles pane.

Known issues

TheDOM BreakpointsandPropertiestabs are not keyboard accessible.

Styles pane

In theStylespane you'll find controls for filtering styles, toggling element states (such as :activeand:focus), toggling classes, and adding new classes. There is also a powerful style inspection tool to explore and modify styles currently applied to the element that's in focus in theDOM Tree.

The key concept to understand about theStylespane is that it only shows styles for the currently-selected node in theDOM Tree.For example, suppose you're done inspecting the styles of a<header>node, and now you want to look at the styles for a<footer>node. To do that, you first need to select the<footer>node in theDOM Tree.You might find it faster to use the Inspectworkflow to inspect a node that's in the general vicinity of thefooternode (such as a link within the footer), which focuses theDOM Tree,and then use your keyboard to navigate to the exact node that you're interested in.

Navigate the Styles pane

Because all of the style tools connect in one way or another back to theStylespane, it makes sense to become an expert in this tool first.

  • With focus on theStylespane, pressTabto move focus inside and explore its contents.
  • PressTabuntil the first style becomes active. If you're using a screen reader this first style will be announced as "element.style {}".
  • PressDown Arrowto navigate the list of styles in order of specificity. A screen reader announces each style starting with the name of the CSS file, the line number that the style appears on, and the style name itself. For example: "main.css:233.card__img {}"
  • PressEnterto inspect a style in more detail. Focus begins on an editable version of the style name.
  • PressTabto move between editable versions of each CSS property and their corresponding values. At the end of each style block is a blank editable text field which you may use to add additional CSS properties.
  • You may continue to pressTabto move through the list of styles, or press Escapeto exit this mode and go back to navigating by arrow keys.

Be sure to read throughthe Styles pane keyboard referencefor additional shortcuts.

Known Issues
  • If you use theFiltereditable text field you will no longer be able to navigate the list of styles.

Toggle element state

To toggle an element's state, such as:activeor:focus:

  1. Navigate to theStylespane and pressTabuntil theToggle Element State button has focus.
  2. PressEnterto expand the collection of element states. The element states are presented as a group of checkboxes.
  3. PressTabuntil the first state,:active,has focus.
  4. PressSpaceto enable it. If the currently-selected element in the DOM Tree has an :activestyle, it's now applied.
  5. Continue pressingTabto explore all of the available states.

Add an exiting class

Adjacent to theToggle Element Statebutton is theElement Classesbutton. Move focus to it by pressingTabthenEnter.Focus moves into an edit text field labeledAdd New Class.

TheElement Classesbutton is primarily used for adding existing classes to an element. For example, if your stylesheet contained a helper class named.clearfixyou could press.inside of the edit text field to see a suggestion list of classes and use theDown Arrowto find the.clearfixsuggestion. Or type the class name out yourself and pressEnterto apply it.

Add a new style rule

Adjacent to theElement Classesbutton is theNew Style Rulebutton. Move focus to it by pressingTaband pressEnter.Focus moves into an editable text field inside of the style inspector. The initial text content of the field is the tag name of the element that is selected in theDOM Tree.You may type any class name you want into this field and then press Tabto assign CSS properties to it.

Computed tab

With focus on theComputedtab,pressTabto move focus inside and explore its contents. Within theComputedtab there are controls for exploring which CSS properties are actually applied to an element in order of specificity.

Explore all computed styles

PressTabuntil you reach the collection of computed styles. These are presented as an ARIAtree.Expanding a listbox reveals which CSS selectors are applying the computed style. These selectors are organized by specificity. A screen reader announces the computed value, which CSS selector is currently matching, the filename of the stylesheet that contains the selector, and the line number for the selector.

Known issues

  • If you use theFiltertext field you will no longer be able to inspect styles.

Event listeners tab

From within theElementspanel you may inspect the event listeners applied to an element using theEvent Listenerstab. With focus on theStylespane, press theRight Arrowto navigate to theEvent Listenerstab.

Explore event listeners

Event listeners are presented as an ARIAtree.You may use the arrow keys to navigate them. A screen reader announces the name of the DOM object that the event listener is attached to, as well as the file name where the event listener is defined and its line number.

Accessibility pane

With focus on theAccessibilitypane,pressTabto move focus inside and explore its contents. Within theAccessibilitypane there are controls for exploring the accessibility tree, the ARIA attributes applied to an element, and its computed accessibility properties.

Accessibility Tree

TheAccessibility Treeis presented as an ARIAtreewhere eachtreeitemcorresponds to an element in the DOM. The tree announces the computed role for the selected node. Generic elements likedivandspanare announced as "GenericContainer" in the tree. Use the arrow keys to traverse the tree and explore parent-child relationships.

Known issues

  • The type of ARIA tree used by theAccessibilitypane may not be properly exposed in Chrome for macOS screen readers like VoiceOver. Subscribe toChromium issue #868480to be informed about progress on this issue.
  • TheARIA AttributesandComputed Propertiessections are marked up as ARIA trees, but they do not currently have focus management so they are not keyboard operable.

Audits panel

TheAuditspanel let's you run a series of tests against a site to check for common issues related to performance, accessibility, SEO, and a number of other categories.

Configure and run an audit

  1. When theAuditspanel is first opened, focus is placed on theRun Auditbutton at the end of the form. By default the form is configured to run audits for every category using mobile emulation on a simulated 3G connection.
  2. UseShift+Tabor navigate back in Browse mode to change the audit settings.
  3. When you're ready to run the audit, navigate back to theRun Auditbutton and press Enter.
  4. Focus moves into a modal window with aCancelbutton which allows you to exit the audit. You may hear a series of earcons as the audit runs and refreshes the page multiple times.

Known issues

  • The different sections of the configuration form are not currently marked up with afieldset element. It may be easier to navigate them in Browse mode to figure out which controls are associated with each section.
  • There is no earcon or live region announcement when the audit is finished running. Generally it takes about 30 seconds, after which you should be able to navigate to the results. Using Browse mode may be the easiest way to reach the results.

Navigate the audit report

The audit report is organized into sections that correspond with each of the audit categories. The report opens with a list of scores for each category. These scores are also links which can be used to skip to the relevant sections. Within each section are expandabledetailselements, which contain information relating to passed or failed audits. By default, only failing audits are shown. Each section ends with a finaldetailselement which contains all of the passed audits.

To run a new audit, useShift+Tabto exit the report and look for the Perform An Auditbutton.