What Is the Accessibility Tree?
Every web page has a DOM tree that the browser builds from your HTML. From this DOM, the browser also constructs an accessibility tree; a parallel structure stripped down to only the information assistive technologies need. This includes element roles, accessible names, states, and relationships. Screen readers and other tools use this tree exclusively to present the page to users.
HTML-AAM: How Elements Map to Roles
The HTML Accessibility API Mappings specification defines how each HTML element maps to an accessibility role. For example, header becomes banner, nav becomes navigation, and button keeps its button role. Generic elements like div and span map to the generic role, which tells assistive technologies nothing about the element's purpose or function.
The Problem with Div Soup
When developers use div and span for everything instead of semantic elements, the resulting accessibility tree is flat and meaningless. Screen reader users cannot jump between landmarks, find headings, or navigate lists. The visual appearance may look identical, but the underlying structure provides no information to assistive technology users who depend on it.
Best Practices for Semantic Markup
Use native HTML elements that carry implicit ARIA roles whenever possible. Reserve ARIA attributes for cases where no native element exists. Ensure all landmarks have accessible names, all images have descriptive alt text, and all form controls have associated labels. Test with real screen readers in addition to automated tools to catch issues that static analysis cannot detect.
