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:

  1. Open the accessibility-testing demo webpage in a new tab. Then select F12 to open DevTools.

  2. Select the Inspect (the Inspect icon) button in the top-left corner of DevTools so that the button is highlighted (blue).

  3. In the rendered webpage, in the Donation section, hover over the 100 button. The Inspect tool overlay appears.

  4. In the rendered webpage, select the 100 button. In DevTools, the Elements tool is displayed. The DOM tree shows the div element for the 100 button. The Styles pane shows the CSS settings for the element.

  5. To the right of the Styles tab, select the Accessibility tab. The Accessibility Tree for the element is displayed, and is expanded.

Donation form button in the Accessibility Tree tool

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.

See also

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 Alt+Shift+I (Windows, Linux) or Option+Shift+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.

The Send Feedback icon in the Microsoft Edge DevTools