- Success Criterion 4.1.2
- Conformance level A
4.1.2 · Name, Role, Value
Lesson overview · Name, Role, Value
In plain language
User interface components must expose an accessible name, role, and current value or state that assistive technologies can determine and update.
Who it affects
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
How to check
With a screen reader, land on every control: it must announce a sensible name, the right type, and its state (checked, expanded, selected) — and updates when the state changes.
Common misconception
A div styled to look exactly like a checkbox is invisible to this rule unless it also has the checkbox role and a live checked state, visual similarity means nothing to assistive technology.
Learn more
Scenarios in this lesson
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus
- Multi-Part Field Where Each Box Has No Individual Name
- Icon-Only Control With No Name Exposed to Assistive Tech
- Control With an On-Screen Label but No Accessible Name
- Custom Checkbox or Toggle With No Role or Checked State
- Accordion or Tab Missing Its Expanded or Selected State
- Expanded State Attribute That Never Updates When Toggled
- Modal Dialog With No Role or Accessible Name Set
- Aria-Hidden Attribute Left on Content That’s Now Visible
- Button Built From a Link With No Real Destination
- ARIA Role Assigned That Doesn’t Match the Control’s Behavior
- Invalid or Conflicting ARIA Attributes on a Custom Widget
- Accessible Name Computed as Meaningless Icon or Code Text
- Custom Slider Missing Its Value, Minimum, or Maximum Settings
- Combobox Missing the ARIA Wiring for Its Open and Active State
- Live Value Update With No Way for Screen Readers to Detect It
- Iframe Embedded With No Title Describing Its Content
- Rich Text Editor With No Role, Name, or State Exposed
- Web Component Whose Shadow DOM Hides All Its Semantics
- Toggle Button Showing State Only Through Color or Icon Change
- Progress Bar Built as a Styled Div With No Real Role
- Rating Widget With No Name or Value Semantics at All
- Duplicate Element IDs Causing a Control’s Name to Resolve Wrong
- Disabled Control That’s Only Disabled Visually, Not in Code
- Complex Widget Relying on a Title Attribute for Its Name
- Nested Interactive Elements Causing a Double Role Announcement
- State Attribute Present on an Element That Never Actually Changes
- Control Announcing a State That Contradicts Its Real Behavior