Q4 of 24 · Accessibility
What is the accessibility tree and how does assistive technology use it?
Short answer
Short answer: The accessibility tree is a parallel representation of the DOM that browsers expose to assistive technology via platform accessibility APIs. Each node contains the element's role, name, state, and value — what a screen reader announces. It differs from the DOM: display:none elements are absent; ARIA attributes can override the native semantics.
Detail
Browsers maintain two trees: the DOM tree (for rendering and scripting) and the accessibility tree (for assistive technology). The accessibility tree is derived from the DOM but is not identical to it:
What's excluded: elements with display: none, visibility: hidden, or aria-hidden="true" are removed from the accessibility tree — invisible to screen readers. Decorative images with alt="" are also excluded.
What's different: ARIA attributes modify the accessibility tree without changing the DOM. Adding aria-expanded="false" to a button adds a state to the accessibility tree; the DOM element itself is unchanged. Adding aria-hidden="true" to a decorative icon removes it from the tree without removing it from the DOM.
What assistive technology reads: for each node in the accessibility tree, the AT receives: role (what kind of element it is — button, heading level 2, text field), accessible name (what it's called — the label), state (checked, expanded, disabled), and value (current value for inputs). Screen readers announce these in a format defined by the platform.
How to inspect it: Chrome DevTools → Elements tab → Accessibility pane shows the accessibility tree for any selected element. The "Full page accessibility tree" view in DevTools shows the entire tree. This is your primary tool for accessibility debugging.