CodePark/ questions / Accessibility tree & names
START PRACTICINGPRACTICE
Frontend question · Accessibility › Accessibility tree & names

What is the accessibility tree? How does a screen reader use it?

<button aria-expanded="false">Filters</button>

Accessibility tree node:
  role:  button
  name:  "Filters"
  state: collapsed, focusable

The accessibility tree is a second tree the browser builds from the DOM. It holds only what assistive technology needs to know about each element.

Each node in the tree has:

  • a role: what it is, such as button, link, heading or checkbox
  • a name: what it is called, such as "Filters"
  • states and values: such as checked, expanded, disabled, or the text in an input
  • sometimes a description: extra help text

The browser leaves out things that don't matter, such as purely layout divs and elements hidden with display: none.

How a screen reader uses it: the screen reader does not read your HTML. It asks the operating system's accessibility API for the tree. On Windows that is UI Automation, and on macOS it is the AX API. Then it reads each node aloud, for example "Filters, button, collapsed". It also uses roles to jump around, such as "next heading" or "list all links".

This is why semantic HTML matters. A <button> gets the right role for free. A styled <div> shows up with no role at all.

You can inspect the tree in Chrome or Firefox DevTools, in the Accessibility panel.

  • The browser builds the accessibility tree from the DOM.
  • Each node has a role, a name, states and sometimes a description.
  • Screen readers read this tree through the operating system's accessibility API, not the HTML.
  • Semantic HTML gives correct roles for free, and a plain div has no role.
  • You can inspect the tree in the browser DevTools Accessibility panel.