The accessibility tree is the parallel data structure that the browser derives from the DOM and that assistive technologies read. Screen readers perceive a page through this tree, not through its visual layout. Each node in the tree carries name, role and value information, determined by semantic HTML and ARIA attributes. Elements hidden with display:none or aria-hidden are removed from the tree entirely.
While processing a page, the browser produces two structures: the render tree, which determines the visible layout, and the accessibility tree, which is exposed to assistive technologies. The latter is a simplified projection of the DOM: wrapper divs that serve purely visual purposes do not enter the tree, while meaningful elements are represented with three core pieces of information. Name (how the element is announced, such as a button label), role (what the element is, such as button, link or heading) and value (its current content where applicable, such as a slider's number). When a screen reader says 'Submit, button', it is reading this triple.
The first force shaping the tree is semantic HTML: a button element receives its role automatically, and a form field connected to a label receives its name. ARIA attributes are the second layer: aria-label changes the name, the role attribute redefines the role, and states such as aria-expanded are attached to the node. This is also where the danger of incorrect ARIA lies: wrong information written into the tree describes an interface to the screen reader that does not exist. Hiding works in two directions: display:none and visibility:hidden hide an element visually and remove it from the tree, while aria-hidden='true' removes it only from the tree while it stays on screen. Browser developer tools show the tree node by node; inspecting it is the fastest way to learn how a component will be announced.
Frequently asked questions
How can I view the accessibility tree?
Modern browsers have a built-in view in their developer tools: in Chrome, the Accessibility tab in the Elements panel shows the selected element's node in the tree with its computed name and role, and a full-tree view can be enabled. In Firefox, the Accessibility panel offers similar information. Rather than guessing how a component will be announced by a screen reader, checking its counterpart in the tree is always more reliable.
What is the difference between aria-hidden and display:none?
display:none removes an element from both the visual layout and the accessibility tree: nobody can see it, and no screen reader can announce it. aria-hidden='true' removes the element only from the tree: sighted users continue to see it on screen while assistive technologies ignore it. For this reason, aria-hidden should be used only on decorative or repetitive content and never applied to interactive or information-bearing elements.
This content is for information only and is not legal advice.