ARIA toggle controls must have accessible names
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every toggle must have a descriptive name and accurately report its on/off state.
Why this matters and how to fix it
Why this matters
Toggle controls like switches or checkboxes communicate a binary state. Without an accessible name, screen reader users cannot understand what the toggle controls, making critical settings inaccessible and breaking task completion.
How to fix this issue
Provide a meaningful accessible name for each toggle. Use a visible <label> where possible, or `aria-label` / `aria-labelledby` for icon-only or custom components. Ensure `aria-checked` reflects the current state (`true` or `false`).
Developer guidance
Use native `<input type="checkbox">` with a <label> for standard toggles. For custom switches with `role="switch"`, require a label prop and update `aria-checked` on state changes. Include automated tests to verify that both the name and state are correctly announced by assistive technologies.
Code examples
Incorrect Implementation
<div role="switch" aria-checked="false"></div>Correct Implementation
<div role="switch" aria-checked="false" aria-label="Dark mode"></div>Real-World Examples
Before
<div role="switch" aria-checked="true"></div> <!-- Screen reader announces only 'switch', no context -->After
<div role="switch" aria-checked="true" aria-label="Email notifications"></div> <!-- Screen reader announces 'Email notifications, switch, checked' -->Manual testing
- 1. Inspect all toggle controls on the page.
- 2. Verify that each toggle has a visible label or an `aria-label` / `aria-labelledby`.
- 3. Check that `aria-checked` accurately reflects the toggle's state.
- 4. Navigate using a screen reader to confirm the name and state are announced.
- 5. Add automated tests to catch missing names or incorrect state updates.
Trusted by organizations across Europe working toward WCAG and EAA conformance