Level AWCAG 2.2
4.1.2 Name, Role, Value
For all UI components, the name and role can be programmatically determined; states and values can be set and notified.
Why it matters
Screen readers
Without the correct name, role, and state, users cannot understand how to use a UI component or what it means.
Keyboard users
Custom widgets without a role and keyboard support are simply unusable.
Assistive tech compatibility
Speech recognition software targets UI elements by accessible name. Without a name, users cannot command them.
Custom components
When building custom UI with div/span, you must expose name, role, and value via WAI-ARIA.
Live demo
Custom checkbox
Try it
Agree to the terms
It cannot be operated from the keyboard. Try tabbing to it.
Accessibility tree
generic
├─ generic (div)
│ └─ "✓" (text only)
└─ "Agree to the terms"
No role, no state, and no accessible name
Persona perspective
Yamada (42) — Totally blind, screen reader user
On e-commerce sites with custom checkboxes, my screen reader says nothing. They're recognized as clickable divs with no checked state. I didn't realize the 'I agree' box needed to be checked, and form submission kept failing.