Accessibility tree
The accessibility tree is the structured representation of a webpage that assistive technologies — screen readers, voice control, switch devices — read instead of the visual rendering. Browsers compute the accessibility tree from the DOM, semantic HTML, ARIA attributes, and CSS visibility, exposing it through platform APIs to assistive tech.
The accessibility tree is the parallel reality assistive-tech users experience. A page that looks correct visually can be broken in the accessibility tree: <div onclick> with no role, button with no accessible name, image with empty alt, modal with no focus trap. Tools to inspect: Chrome DevTools' Accessibility panel, Firefox's Accessibility Inspector, axe-core for automated checking. The discipline that produces a clean accessibility tree is mostly disciplined semantic HTML — use the right element for the job, label every interactive control, manage focus on dynamic content, and reach for ARIA only when native semantics can't express the pattern.
Related terms
- Semantic HTML
Semantic HTML uses HTML elements according to their meaning — <button> for buttons, <nav> for navigation, <article> for self-contained content, <h1>-<h6> for hierarchical headings — rather than reaching for <div> with styling.
- Progressive enhancement
Progressive enhancement is the design strategy of building a page that works at a minimum HTML+CSS baseline, then layering interactive enhancements on top via JavaScript.
- OWASP Top 10
The OWASP Top 10 is a community-curated list of the most critical web application security risks, published every 3-4 years by the Open Web Application Security Project.