
This works for DOM tree ⬌ Accessibility tree view too! This is a great way to understand the mapping between the DOM node and its accessibility tree node. The corresponding DOM node is selected now. Select a node and toggle back to the DOM tree view. You can expand nodes or click to see details in the Accessibility pane.

You can click on it to toggle to the Full-page accessibility tree view. Then, reload DevTools and you will see a new accessibility button in the Elements panel.

In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox.

The new Full-page accessibility tree makes it easier for you to get an overview of the full-page accessibility tree and help you better understand how your web content is exposed to assistive technology. # Preview feature: Full-page accessibility tree
