WCAG 2.1 · Level A · Robust
WCAG 4.1.2 — Name, Role, Value, explained with examples
For every UI component, the name, role, and state (and any value where applicable) must be programmatically determinable. A custom toggle that looks like a switch but is built from <div>s is invisible to assistive tech. WCAG 4.1.2 is the bridge between custom UI and the accessibility tree.
- Number
- 4.1.2
- Level
- A
- Principle
- Robust
- Guideline
- 4.1 Compatible
Why this criterion exists
A custom toggle that looks like a switch but is built from <div>s is invisible to assistive tech. WCAG 4.1.2 is the bridge between custom UI and the accessibility tree.
If you only remember one thing: for every ui component, the name, role, and state (and any value where applicable) must be programmatically determinable. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Name, Role, Value affects:
Screen reader users
Voice control users
Switch device users
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
<div role="button"> without aria-label
Toggle state not reflected in aria-pressed
Custom dropdown without combobox role
How to test for it
Inspect components with the browser accessibility tree (Chrome DevTools → Accessibility).
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
<button> gives role and keyboard handling. aria-pressed conveys the on/off state to assistive tech.
The problem
<div class="toggle-on" onclick="toggle()"></div>The fix
<button type="button" aria-pressed="true" onclick="toggle()">
Notifications
</button><button> gives role and keyboard handling. aria-pressed conveys the on/off state to assistive tech.
Frequently asked questions
What are the three things every UI component must expose under 4.1.2?
Name: what the control is called (from visible text, aria-label, or aria-labelledby). Role: what type of control it is (button, checkbox, link, combobox). Value/state: the current state of the control where applicable (aria-pressed="true", aria-checked="false", aria-expanded="true", aria-selected). All three must be programmatically determinable — the accessibility tree is the bridge between your markup and the assistive technology.
Is building a custom dropdown worth it accessibility-wise?
Rarely. Native <select> gives you role, keyboard support, name association, and value updates for free. A custom dropdown requires implementing combobox role, aria-expanded, aria-haspopup, option roles, aria-activedescendant, full keyboard pattern (Enter, Space, Escape, Arrows), and focus management. Most custom dropdowns in the wild fail at least two of those. Use native selects and style them with custom CSS before reaching for a from-scratch implementation.
How does 4.1.2 relate to ADA and EAA enforcement?
Inaccessible custom UI components (missing roles, broken states) are among the most common findings in expert accessibility audits submitted as evidence in ADA litigation. In NFB v. Target Corp. (2006), the ability to operate site controls via screen reader was a core issue. WCAG 4.1.2 is a Level A criterion — the baseline — and its violation signals that basic interoperability with assistive technology was not considered during development.
Does every icon need an accessible name?
If the icon is the only content inside an interactive control (button, link), yes — it must have an accessible name via aria-label, visually-hidden text, or a title. If the icon is decorative and the control has a visible text label, set aria-hidden="true" on the icon to prevent double announcement. The control's accessible name should come from one clear source, not two.
Other Robust criteria
4.1.3 Status Messages
Robust · Level AA
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
How to fix: form fields without labels
Fix recipe · 3.3.2, 1.3.1, 4.1.2
How to fix: empty links and image-only links
Fix recipe · 2.4.4, 4.1.2
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.