Rob Dodson

This guide aims to help users who primarily rely on assistive technology like screen readers accessand useChrome DevTools. Chrome DevTools is a suite of web developer tools built into theGoogle Chrome browser. SeeAccessibility Reference if you're looking for DevTools featuresrelated to improving the accessibility of a web page.

The accessibility of DevTools is a work-in-progress. Some panels and tabs work better with assistivetechnology than others. This guide walks you through the panels which are the most accessible andhighlights 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 isdivided into a series ofpanels which are organized into anARIAtablist. For example:

• TheElements panel lets you view and changeDOM nodes orCSS.
• TheConsole 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 astabs orpanes in the documentation. For instance, theElements panel contains additionaltabs to inspect event listeners, the accessibility tree, and much more. The distinction between tabsand panes is somewhat arbitrary. The only reason you'll see one term or the other is to maintainconsistency with the rest of the official DevTools documentation.

Keyboard shortcuts

TheDevTools Keyboard Shortcuts reference is a helpful cheatsheet. Be sure to bookmark it andrefer 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 theprevious panel.
• It's also possible to useShift+Tab to move focus into a panel'stablistand use the arrow keys to change panels, though it may be faster to use the previously mentionedshortcuts.

Known issues

• Some panels, such as theConsole andPerformance panels, may move focus into their contentarea 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 thepanel. 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+P orCommand+Shift+P (Mac) to open theCommand Menu. TheCommand Menu is a fuzzy search autocomplete combobox.
2. Type the name of the panel you'd like to open, then use theDown Arrow keyboard tonavigate to the correct option.
3. PressEnter to run a command.

For example, to open theElements panel:

1. Open theCommand Menu.
2. TypeE thenL. ThePanel > Show Elements option is selected.
3. PressEnter 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 theElements panel, 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 theInspect option. This opens theElements panel and focuses the elementin theDOM Tree.

TheDOM Tree is laid out as anARIAtree. SeeNavigate theDOM Tree with akeyboard for 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 theCopy option.
3. SelectCopy outerHTML.

Known issues

• Copy outerHTML often 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, pressEnter to make it editable.
• PressTab to move between attribute values. When you hear "space" you are inside of anempty text input and can type a new attribute value.
• PressControl+Enter orCommand+Enter (Mac) to acceptthe 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 keysto explore your input you also get no feedback. The easiest way to check your work is to acceptthe 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, pressEnter to make it editable.
• PressTab to move between attribute values. When you hear the element's name, forinstance, "h2", you are inside of a text input and may change the element's type.
• PressControl+Enter orCommand+Enter (Mac) to acceptthe change.

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

Elements panel tabs

TheElements panel contains additional tabs for inspecting things like the CSS applied to anelement or its place in the accessibility tree.

• With focus on a node in theDOM Tree, pressTab until you hear that theStylespane is selected.
• Use theRight Arrow to explore other available tabs.

TheDOM Tree turns elements withhref attributes into focusable links, so you may need topressTab more than once to reach the Styles pane.

Known issues

TheDOM Breakpoints andProperties tabs are not keyboard accessible.

Styles pane

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

The key concept to understand about theStyles pane is that it only shows styles for thecurrently-selected node in theDOM Tree. For example, suppose you're done inspecting the stylesof a<header> node, and now you want to look at the styles for a<footer> node. To do that, youfirst need to select the<footer> node in theDOM Tree. You might find it faster to use theInspect workflow to inspect a node that's in the general vicinity of thefooter node (suchas a link within the footer), which focuses theDOM Tree, and then use your keyboard to navigateto 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 theStyles pane, it makessense to become an expert in this tool first.

• With focus on theStyles pane, pressTab to move focus inside and explore itscontents.
• PressTab until the first style becomes active. If you're using a screen reader thisfirst style will be announced as "element.style {}".
• PressDown Arrow to navigate the list of styles in order of specificity. A screenreader announces each style starting with the name of the CSS file, the line number that the styleappears on, and the style name itself. For example: "main.css:233 .card__img {}"
• PressEnter to inspect a style in more detail. Focus begins on an editable version ofthe style name.
• PressTab to move between editable versions of each CSS property and theircorresponding values. At the end of each style block is a blank editable text field which you mayuse to add additional CSS properties.
• You may continue to pressTab to move through the list of styles, or pressEscape to exit this mode and go back to navigating by arrow keys.

Be sure to read throughthe Styles pane keyboard reference for additional shortcuts.

Known Issues

• If you use theFilter editable text field you will no longer be able to navigate the list ofstyles.

Toggle element state

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

1. Navigate to theStyles pane and pressTab until theToggle Element Statebutton has focus.
2. PressEnter to expand the collection of element states. The element states arepresented as a group of checkboxes.
3. PressTab until the first state,:active, has focus.
4. PressSpace to enable it. If the currently-selected element in the DOM Tree has an:active style, it's now applied.
5. Continue pressingTab to explore all of the available states.

Add an exiting class

Adjacent to theToggle Element State button is theElement Classes button. Move focus to itby pressingTab thenEnter. Focus moves into an edit text field labeledAddNew Class.

TheElement Classes button is primarily used for adding existing classes to an element. Forexample, if your stylesheet contained a helper class named.clearfix you could press. inside ofthe edit text field to see a suggestion list of classes and use theDown Arrow to findthe.clearfix suggestion. Or type the class name out yourself and pressEnter to applyit.

Add a new style rule

Adjacent to theElement Classes button is theNew Style Rule button. Move focus to it bypressingTab and pressEnter. Focus moves into an editable text field insideof the style inspector. The initial text content of the field is the tag name of the element that isselected in theDOM Tree. You may type any class name you want into this field and then pressTab to assign CSS properties to it.

Computed tab

With focus on theComputed tab, pressTab to move focus inside and explore itscontents. Within theComputed tab there are controls for exploring which CSS properties areactually applied to an element in order of specificity.

Explore all computed styles

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

Known issues

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

Event listeners tab

From within theElements panel you may inspect the event listeners applied to an element usingtheEvent Listeners tab. With focus on theStyles pane, press theRight Arrow tonavigate to theEvent Listeners tab.

Explore event listeners

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

Accessibility pane

With focus on theAccessibility pane, pressTab to move focus inside andexplore its contents. Within theAccessibility pane there are controls for exploring theaccessibility tree, the ARIA attributes applied to an element, and its computed accessibilityproperties.

Accessibility Tree

TheAccessibility Tree is presented as an ARIAtree where eachtreeitem corresponds to anelement in the DOM. The tree announces the computed role for the selected node. Generic elementslikediv andspan are announced as "GenericContainer" in the tree. Use the arrow keys totraverse the tree and explore parent-child relationships.

Known issues

• The type of ARIA tree used by theAccessibility pane may not be properly exposed in Chrome formacOS screen readers like VoiceOver. Subscribe toChromium issue #868480 to be informedabout progress on this issue.
• TheARIA Attributes andComputed Properties sections are marked up as ARIA trees, but theydo not currently have focus management so they are not keyboard operable.

Audits panel

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

Configure and run an audit

1. When theAudits panel is first opened, focus is placed on theRun Audit button at theend of the form. By default the form is configured to run audits for every category using mobileemulation on a simulated 3G connection.
2. UseShift+Tab or navigate back in Browse mode to change the auditsettings.
3. When you're ready to run the audit, navigate back to theRun Audit button and pressEnter.
4. Focus moves into a modal window with aCancel button which allows you to exit the audit. Youmay 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 afieldsetelement. It may be easier to navigate them in Browse mode to figure out which controls areassociated with each section.
• There is no earcon or live region announcement when the audit is finished running. Generally ittakes about 30 seconds, after which you should be able to navigate to the results. Using Browsemode 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. Thereport opens with a list of scores for each category. These scores are also links which can be usedto skip to the relevant sections. Within each section are expandabledetails elements, whichcontain information relating to passed or failed audits. By default, only failing audits are shown.Each section ends with a finaldetails element which contains all of the passed audits.

To run a new audit, useShift+Tab to exit the report and look for thePerform An Audit button.