What is the accessibility tree and how do you inspect it?
Model answer
The accessibility tree is a version of the page that the browser builds from the DOM and CSS, and exposes to assistive technology through platform accessibility APIs. A screen reader reads this tree, not the visual page.
Each node carries the information users need:
- Role: button, link, heading, checkbox.
- Name: the label, such as "Submit order".
- State and value: checked, expanded, disabled, current text.
- Relationships: what labels or describes the element.
What is left out: elements with display: none, visibility: hidden, aria-hidden="true", inert, and purely presentational elements such as an image with alt="".
To inspect it, open Chrome or Edge DevTools, select an element, and use the Accessibility pane to see its computed name and role. Firefox has a dedicated Accessibility panel with a full tree view.
This is the quickest way to verify that a button has a name, or that a hidden modal is really hidden.
Good semantics in the HTML give a good tree; ARIA only adjusts it when native HTML cannot.
Key points
- The browser builds it from DOM and CSS for assistive technology
- Nodes carry role, name, state and relationships
- Hidden and decorative content is excluded
- Inspect it in the browser DevTools Accessibility pane
Likely follow-ups
- How does CSS affect what appears in the tree?
- How can the computed name differ from the visible text?
Common mistakes
- Assuming screen readers read the visual layout
- Trusting markup without checking the computed name and role