Accessibility tree

The browser's parallel structure of names, roles, values, and states that assistive technology uses instead of the visual page.

what the screen reader seesthe invisible copy of the page for blind usersthe page without the visual stylingscreen reader DOMwhere does the screen reader get its informationwhy does devtools show a different treea11y treeaccessiblity tree

See it

Live demo coming soon

What it is

The accessibility tree is the browser's parallel representation of the interface for assistive technology. It derives from the DOM, native HTML semantics, CSS, and ARIA, then exposes useful properties such as name, role, value, state, and relationships through the operating system's accessibility APIs: UI Automation on Windows, NSAccessibility on macOS, AT-SPI on Linux. Screen readers and refreshable braille displays use that information instead of interpreting pixels.

Reach for the concept when a control looks right but is announced wrong, or not at all. Chrome DevTools and Firefox Accessibility Inspector let you inspect the computed tree. A real button contributes button semantics automatically; a clickable div is usually only a generic node until code supplies its missing role, keyboard behavior, name, and state.

Gotcha: it is not a cleaned-up copy of the DOM, and there is no guaranteed one-to-one node mapping. Elements hidden with display:none are normally removed, while other nodes may be merged or represented by their computed semantics. ARIA can change what the tree says, but it does not add focus, keyboard handling, or click behavior.

Ask AI for it

Audit this component in the Chrome DevTools Accessibility pane. For every interactive element, record the computed name, role, value, state, and relationships exposed in the accessibility tree. Replace clickable divs and spans with native button, a, input, select, and textarea elements where they fit. Add aria-expanded, aria-selected, aria-checked, aria-current, aria-describedby, and aria-live only where the corresponding behavior or relationship exists. Remove duplicate or decorative nodes with appropriate HTML or aria-hidden='true', without hiding focusable descendants. Then verify the repaired tree in Firefox Accessibility Inspector and add keyboard tests, because ARIA changes semantics but does not implement interaction.

You might have meant

screen readerbraille displaysemantic htmlaccessible nameassistive technology

Go deeper