Comparison
Accessibility treevsDocument Object Model
Accessibility tree
you opened the accessibility panel and saw what a screen reader sees, which was not what you drew.
The parallel tree the browser derives from the DOM, holding each node's role, name, state and value — the version of your interface assistive technology consumes. Elements can be present in the DOM and absent from it, or present with a role you did not intend. Inspecting it directly turns accessibility from guesswork into reading the output, which is why the devtools panel is the fastest tool in this whole section.
Full entry →Document Object Model
you open the elements panel and the tree you see is not the HTML you wrote, because scripts changed it.
The live tree of objects the browser builds from parsed HTML and exposes to JavaScript. It is the source of truth for what is on the page, not the HTML file, which is why 'view source' and the elements panel disagree on any page with scripts. Every DOM node carries substantial memory and every mutation can invalidate layout, so the tree's size is a performance number and not just a structural detail.
Full entry →