Structure Carries Meaning: The Accessibility Tree

Web browsers construct two parallel representations of a web page:

1. The Document Object Model (DOM): The programmatic hierarchy of nodes used for CSS styling and JavaScript interaction.
2. The Accessibility Tree: A specialized API tree generated from semantic HTML elements that exposes Name, Role, State, and Value to assistive technologies like screen readers, speech input engines, and braille displays.

When you style a <div> or <span> to visually look like a button with rounded corners and gradients, zero semantic metadata is conveyed to the accessibility tree. To a blind screen reader user, it is invisible as an actionable control—it is announced merely as generic 'text'.