On this page
Roles, Names & States
The three questions#
Inspect
Ask of every control
- Role
- What kind of thing is this?
- Name
- What is it called?
- State
- What condition is it in?
Quick reads
- Role — button, link, heading, checkbox…
- Name — computed accessible name string
- State — expanded, checked, disabled, selected…
Deep dives live in Accessible Names and States & Properties.
Names#
Interactive demo
Name computation playground
Name source
- Name source
- text content
- Role
- button
- Name
- "Save draft"
- State
- enabled
- Markup
<button type="button">Save draft</button>
States#
Interactive demo
State playground
ARIA state
- Role
- button
- Name
- "Details"
- State
- aria-expanded="false"