WCAG 4.1.2: Name, Role, Value
For all UI components, the name (accessible label), role (what type of element it is), and value/state must be programmatically determinable. Custom components must expose these to assistive technologies via ARIA.
What is WCAG 4.1.2 Name, Role, Value?
WCAG 4.1.2 Name, Role, Value is a Level A web accessibility success criterion under the Robust principle. For all UI components, the name (accessible label), role (what type of element it is), and value/state must be programmatically determinable. Custom components must expose these to assistive technologies via ARIA. Common failures include custom buttons/links without role attributes and interactive elements without accessible names. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Check custom widgets have appropriate ARIA roles (role='button', role='tab', etc.)
- ✓ Verify all interactive elements have accessible names (via labels, aria-label, or aria-labelledby)
- ✓ Test that state changes (expanded, selected, checked) are reflected in ARIA attributes
- ✓ Check custom toggles have aria-pressed or aria-checked
- ✓ Test with a screen reader and verify announcements match visual presentation
Common Failures
- ✗ Custom buttons/links without role attributes
- ✗ Interactive elements without accessible names
- ✗ State changes not reflected in ARIA (e.g., dropdown open but no aria-expanded)
- ✗ Custom checkboxes without aria-checked state
- ✗ Tab interfaces without role='tablist', role='tab', role='tabpanel'
✓ Good Example
<!-- Custom toggle button --> <button aria-pressed="false" onclick="toggleDarkMode(this)"> Dark Mode </button> <!-- Custom disclosure --> <button aria-expanded="false" aria-controls="details-panel" onclick="togglePanel(this)"> Show Details </button> <div id="details-panel" hidden> <p>Additional details here.</p> </div>
The toggle button uses aria-pressed to communicate its state. The disclosure button uses aria-expanded and aria-controls to associate with its panel.
✗ Bad Example
<!-- Custom toggle with no state --> <div class="toggle" onclick="toggleDarkMode()"> Dark Mode </div> <!-- Disclosure with no ARIA --> <span class="clickable" onclick="showPanel()"> Show Details </span> <div class="panel hidden">...</div>
The toggle has no role, no accessible name, and no state information. The disclosure uses a span with no role, no aria-expanded, and no association with its panel.
Test Your Site for 4.1.2 Compliance
Use our free accessibility tools to check your website against WCAG 4.1.2.
Open Testing Tool