Check the Accessibility Tree for keyboard and screen reader support
Several DevTools features check for keyboard and screen reader support. Using the Inspect tool to check the accessibility of each page element individually can become pretty time-consuming. An alternative way to check a webpage is to use the Accessibility Tree. The Accessibility Tree indicates what information the page provides to assistive technology such as screen readers.
The Accessibility Tree is a subset of the DOM tree, which contains elements from the DOM tree that are relevant and useful for displaying the contents of a page in a screen reader. The Accessibility Tree is in the Accessibility tab of the Elements tool (near the Styles tab).
To explore using the Accessibility Tree with the demo page:
Open the accessibility-testing demo webpage in a new tab. Then select F12 to open DevTools.
Select the Inspect () button in the top-left corner of DevTools so that the button is highlighted (blue).
In the rendered webpage, in the Donation section, hover over the 100 button. The Inspect tool overlay appears.
In the rendered webpage, select the 100 button. In DevTools, the Elements tool is displayed. The DOM tree shows the
divelement for the 100 button. The Styles pane shows the CSS settings for the element.
To the right of the Styles tab, select the Accessibility tab. The Accessibility Tree for the element is displayed, and is expanded.
Any element in the tree that doesn't have a name, or has a role of
generic (such as the
div element) is a problem, because that element won't be available to keyboard users, or to users who are using assistive technology.
- View the position of an element in the Accessibility Tree
- Overview of accessibility testing using DevTools
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.