Lessons · HTML and CSS · role, name and state
Role, name and state
The browser turns your markup into an accessibility tree, and assistive software reads that. Every entry has a role, a name and a state.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Almost every accessibility bug is one of those three missing or wrong, so having the three words makes the bugs nameable instead of vague.
How to think about it
Role is what it is: button, link, heading. Name is what it is called. State is what it is doing: pressed, expanded, disabled. Most correct HTML supplies all three with no extra attributes, which is the argument for choosing the right element rather than decorating the wrong one.
Worked example
<button>Save</button>Role from the element, name from its own text content, state from the DOM. Nothing to add.
<label for="e">Email</label><input id="e">The input's name comes from the label. The browser says so: its .labels list has 1 entry, where an input with only a placeholder has 0.
Your turn
The three things every entry in the accessibility tree has.
role, , and state
Write a page and watch it render
The trap
A tree entry can have a role and no name. That is the div-with-role-button case: announced as a button, called nothing, reachable by nobody.