ARIA toggle fields must have accessible names
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Toggle controls such as switches or checkboxes indicate binary states. Without an accessible name, screen reader users know a control exists but not what it does—making it impossible to interact confidently or understand the consequence of toggling it.
How to fix this issue
Add a short descriptive label using aria-label or aria-labelledby that explains the purpose of the toggle, e.g. 'Dark mode' or 'Notifications.' Verify with a screen reader that both the label and current state are announced. Prefer native HTML inputs with type='checkbox' or type='switch' when available before applying ARIA.
Developer guidance
Missing toggle labels frequently occur in custom UI libraries that style switches independently of native inputs. Ensure your component API requires a 'label' or 'ariaLabel' prop. Incorporate automated axe-core scans in CI to catch unlabeled toggles. Validated against WAI-ARIA 1.2 (December 2021).
Code examples
Incorrect Implementation
<div role="switch" aria-checked="false"></div>Correct Implementation
<div role="switch" aria-checked="false" aria-label="Dark mode"></div>
Trusted by organizations across Europe working toward WCAG and EAA conformance