Documentation navigation

On this page

DOM vs Accessibility Tree

Two trees#

Often omitted or remapped

  1. Purely presentational markup
  2. Hidden content (CSS display/visibility, aria-hidden, inert)
  3. Decorative images with empty alt
  4. Generic containers without roles or names

Compare elements#

Interactive demo

Split view

Choose an element

DOM / markup

<button type="button">Save</button>

Accessibility tree (conceptual)

Role
button
Name
"Save"
Notes
Native action control. Enter and Space activate. In the a11y tree as an interactive node.

Assistive technologies read the accessibility tree—not the painted pixels alone. Same look can yield very different nodes.