0
Accessibility · Semantic Structure
New technique
The accessibility tree
Screen readers never see your pixels. They read a second map the browser forges from your HTML.
From the DOM, the browser builds an accessibility tree. Every node in it has a role (what it is), a name (what it's called) and sometimes a state (checked, expanded…).
Screen readers and other assistive tech read this tree, not the screen. A <div> styled to look like a button shows up as plain text in it: no role, no name a tool can act on.
The name usually comes from the content. For a link that's all of its content, alt text of images included.
<button>Save</button> → "Save, button" <a href="/halls">Halls</a> → "Halls, link" <input type="checkbox" checked> → "checkbox, checked"