Name, Role, Value
Every interactive element must expose its name (label), role (button, link, checkbox…), and state (expanded, checked, disabled…) to assistive technology. The foundation of everything.
Every button, link, and checkbox must tell assistive tech what it is, what it's called, and its current state. The bedrock everything else rests on.
WCAG 4.1.2 (Level A) requires that for all UI components, the name and role can be programmatically determined, states and values can be programmatically set, and notification of changes is available to assistive technology.
The accessible name computation follows a priority order: aria-labelledby → aria-label → associated label → text content → title attribute. Understanding this cascade is essential for debugging.
Why this matters
This is the foundation of assistive technology compatibility. If an interactive element doesn't expose its name (what it's called), role (what it is), and state (what condition it's in), it's invisible or misleading to screen reader users.
How to detect
Open DevTools → Accessibility tab. For each interactive element, check: does it have an accessible name? Is the role correct (button, link, checkbox, etc.)? Is the state accurate (expanded, checked, disabled)?
How to fix
<!-- Name: what is it called? --> <button aria-label="Close dialog">✕</button> <!-- Role: what is it? --> <div role="switch" aria-checked="true">Dark mode</div> <!-- State: what condition is it in? --> <button aria-expanded="false" aria-controls="menu"> Menu </button> <ul id="menu" hidden> <li><a href="/about">About</a></li> </ul>