Accessibility Tree
Design Processes
The version of the page that screen readers and assistive tech actually see.
In practice
The accessibility tree is a parallel structure the browser builds from the DOM, containing only what matters to assistive technology: roles, names, states and relationships. A beautiful visual layout can produce a nonsensical tree — unlabelled buttons, images with no description, headings out of order — and that tree is the whole interface for someone using a screen reader.
Questions
What is Accessibility Tree?
The accessibility tree is the browser's representation of a page's meaningful structure and semantics, exposed to screen readers and other assistive technology.
Why do you use Accessibility Tree?
Because it is what a blind user, a voice-control user and increasingly an AI agent experiences. If it is broken, the page is broken for them regardless of how it looks.
How do you use/apply Accessibility Tree?
Use semantic HTML, label every control, keep heading order logical, and inspect the tree in DevTools to see what you have actually built.
When do you use Accessibility Tree?
Throughout development, and always before shipping a new component or page.
Who uses Accessibility Tree?
Front-end developers, designers and accessibility specialists.
