4.1.2: Name, Role, Value

What it means

User interface components must expose their name, role, state, and value to assistive technology. Native HTML elements do this automatically; custom widgets need ARIA and keyboard support.

If software cannot tell what a control is, users cannot operate it reliably.

How to fix it

• Use native button, input, and select elements where possible.
• For custom controls, set appropriate role, aria-checked, aria-expanded, etc.
• Ensure every control has an accessible name (label or aria-label).
• Update aria values when state changes (for example pressed toggles).

Quick examples

• Good: A custom switch uses role=“switch” and aria-checked updates when toggled.
• Bad: A div styled as a checkbox has no role or checked state in the accessibility tree.
• Good: Slider exposes min, max, and current value programmatically.
• Bad: Star rating is five clickable divs with no names or selected state.