Accessibility tree

Definition

The accessibility tree is the representation a browser builds for assistive technology. Each node carries a role, a name, a description, and a set of states. Screen readers, voice control, and switch devices read this tree, not your markup directly.

Derived from the DOM, not equal to it

The browser computes the accessibility tree from the DOM, then prunes and transforms it. Elements hidden with display: none or hidden are removed entirely. Presentational elements may be collapsed. Some containers exist only in the DOM and never appear in the tree at all.

Why the difference matters

Two pages can produce identical pixels and completely different accessibility trees. This is the mechanism behind most accessibility defects: the visual result is correct while the exposed structure is wrong. A heading styled to look like a heading but marked up as a paragraph is invisible to a reader navigating by headings.

Inspecting it

Every major browser exposes the tree in developer tools, usually beside the DOM inspector. Reading it is the fastest way to check whether an element's role and name are what you intended, and it takes less time than launching a screen reader.

Common failures

• A control whose computed name is empty.
• Text hidden with visibility: hidden still expected to be announced.
• A generic role where a landmark or heading was intended.
• Duplicate landmarks with no distinguishing labels.
• State attributes that never update after interaction.

Review question

Open the accessibility tree beside the rendered page. Does every interactive element have the role and name you expected, and does the reading structure match what the page looks like it means?