This page is a comprehensive reference of accessibility features in Chrome DevTools. It is intendedfor web developers who:

• Have a basic understanding of DevTools, such as how to open it.
• Are familiar withaccessibility principles and best practices.

The purpose of this reference is to help you discover all of the tools available in DevTools thatcan help you examine a page's accessibility.

SeeNavigating Chrome DevTools With Assistive Technology if you're looking for help onnavigating DevTools with an assistive technology like a screen reader.

SeeLearn 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:

1. Can I navigate the page with a keyboard orscreen reader?
2. 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 easyto detect in an automated fashion. Question #1 is just as important, but unfortunately DevToolscan't help you there. The only way to find errors related to question #1 is to try using a page witha keyboard or screen reader yourself. SeeHow To Do An Accessibility Review to learn more.

Audit a page's accessibility

In general, use the accessibility checks under theLighthouse panel to determine if:

• A page is properly marked up for screen readers.
• The text elements on a page have sufficient contrast ratios. See alsoMake your website more readable.

To audit a page:

1. Go to the URL that you want to audit.

2. In DevTools, click theLighthouse panel. DevTools shows you various configuration options.

   

   Note: The screenshots in this section were taken with Chrome 69. In the screenshots, the panelis still namedAudits but it wasrenamed into Lighthouse in Chrome 83You can check what version you're running atchrome://version. TheAudits panel UI will look different insome earlier or later versions of Chrome, but the general workflow is the same.

3. ForDevice, selectMobile if you want to simulate a mobile device. This option changesdifferently your user agent string and resizes the viewport. If the mobile version of the pagedisplays differently than the desktop version, this option could have a significant effect onthe results of your audit.

4. In theLighthouse section, make sure thatAccessibility is enabled. Disable the othercategories if you want to exclude them from your report. Leave them enabled if you want todiscover other ways to improve the quality of your page.

5. TheThrottling section lets you throttle the network and CPU, which is useful when analyzingload performance. This option should be irrelevant to your accessibility score, so you can usewhatever you prefer.

6. TheClear Storage checkbox lets you clear all storage before loading the page, or preservestorage between page loads. This option is also probably irrelevant to your accessibility score,so you can use whatever you prefer.

7. ClickGenerate Report. After 10 to 30 seconds, DevTools provides a report. Your report gives youvarious tips on how to improve the page's accessibility.

   

8. Click an audit to learn more about it.

   

9. ClickLearn More to view that audit's documentation.

   

See also: aXe extension

You may prefer to use theaXe extension orLighthouse extension rather than theLighthouse panel that is available by default in Chrome.They generally provide the same information, since aXe is the underlying engine that powers theLighthouse panel. The aXeextension has a different UI and describes audits slightly differently.

One advantage that the aXeextension has over theAudits panel is that it lets you inspect and highlight failing nodes.

Test content reflow with the Device Toolbar

TheWeb Content Accessibility Guidelines (WCAG) reflow criterion recommends that web content remain viewable without loss of information even when the viewport is resized or changes orientation. By aligning content to a single column, users who use enlarged text are supported. To test how your content reflows,resize the viewport dynamically with theDevice toolbar in theLighthouse panel.

To resize the viewport, drag the handles to whatever dimensions you need. For the specific dimensions to test, see theWCAG reflow success criterion.

The Accessibility tab

The Accessibility tab is where you can view the accessibility tree, ARIA attributes, and computedaccessibility properties of DOM nodes.

To open theAccessibility tab:

1. Click theElements panel.
2. In theDOM Tree, select the element which you want to inspect.
3. Click theAccessibility tab. This tab may be hidden behind theMore Tabskeyboard_double_arrow_right button.

You can drag theAccessibility tab to the front for quicker access in the future.

View an element's position in the accessibility tree

The accessibility tree is a subset of the DOM tree. It only contains elements from the DOM treethat are relevant and useful for displaying the page's contents in a screen reader.

Inspect an element's position in the accessibility tree from theAccessibility tab.

This view lets you explore only a single node and its ancestors. To explore the whole accessibility tree, follow the steps below.

(Preview) Explore the full-page accessibility tree

The full-page view of the accessibility tree lets you explore the whole tree and helps you better understand how your web content is exposed to assistive technology.

To explore the accessibility tree:

1. CheckscienceEnable full-page accessibility tree.

2. On the action bar at the top, clickReload DevTools.

   

3. In the upper right corner of theElements panel, toggle theaccessibility_newSwitch to Accessibility Tree view button.

   

4. Browse the accessibility tree. You can expand nodes or click to see details underComputed properties.

5. Select a node and click theaccessibility_newSwitch to DOM tree view button to toggle back to DOM tree.

   The corresponding DOM node is selected now. This is a great way to understand the mapping between the DOM node and its accessibility tree node.

Note: Our team is still actively working on this preview feature. We are looking for yourfeedback to further improve it!

View an element's ARIA attributes

ARIA attributes ensure that screen readers have all of the information that they need in order toproperly represent a page's contents.

View an element's ARIA attributes inthe Accessibility tab.

View the source order of elements on screen

The elements on the page don't always appear in the order they are in the source. This might confuse users who depend on assistive technology to navigate the web.

To view and debug the source order on your website:

1. Inspect an element on the page.
2. InElements >Accessibility >Source Order Viewer, checkcheck_boxShow source order.

In the viewport, DevTools outlines nested elements with borders and marks them with numbers corresponding to their source order.

View an element's computed accessibility properties

Note: If you're looking for computed CSS properties, seethe Computed tab..

Some accessibility properties are dynamically calculated by the browser. These properties can beviewed in theComputed Properties section of theAccessibility tab.

View an element's computed accessibility properties inthe Accessibility tab.

The Rendering tab

Use theRendering tab to emulate certain CSS media features without manually specifying them in your code or testing environment. These media features change the appearance of your web page based on the user's device preferences. To test your page's visual accessibility,open theRendering tab and explore the following options:

• Emulate vision deficiencies to view your page through several different simulated vision deficiencies.
• Emulate CSS media featureprefers-color-scheme to see what your page looks like with dark or light mode enabled. Many think of dark mode as an aesthetic choice, butDark mode as an accessibility tool makes a case for its usefulness otherwise.
• Emulate CSS media type to see your page in a print or screen media style.
• Emulate CSS media featureforced-colors to see how your page looks if the user agent enabled a forced colors mode.
• Emulate CSS media featureprefers-contrast to see your web content with a higher, lower, or specific contrast value.
• Emulate CSS media featureprefers-reduced-motion to view your web content with reduced motion. Some users experience distraction or nausea from animated content. Use this option to see how your page looks without animations or things like smooth-scrolling.
• Emulate CSS media featureprefers-reduced-transparency to see how your web content appears if the user requests to reduce the transparent or translucent layer effects used on the device.

Discover and fix low-contrast text

DevTools can automatically find low-contrast issues and suggest better colors to help you fix them. SeeMake your website more readable to learn more.