Rule ID: ace-aria-toggle-name

Check that ARIA toggle controls like checkbox and switch have accessible names

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Deafblind Mobility Legal Risk

What This Rule Checks

ARIA toggle fields such as checkboxes, radios, and switches must have clear and accessible names that allow assistive technologies like screen readers to interpret their purpose and state. Without proper labels, users with disabilities might not understand the function or state of these interactive elements.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Toggle controls without names are announced as “switch, off” with no indication of what setting they control. On pages with multiple toggles, this makes the interface completely unusable for screen reader users.

How to Fix

To ensure ARIA toggle fields are accessible, follow these guidelines:

Checkboxes: Ensure checkboxes have an accessible label, either through inner text, aria-label, or aria-labelledby.

Menuitemcheckbox: Use aria-label or aria-labelledby to give descriptive text and ensure the aria-checked attribute reflects the correct state.

Menuitemradio: Similar to checkboxes, ensure the element is properly labeled and the aria-checked attribute is correctly applied.

Radio Buttons: Group radio buttons using role=”radiogroup” and give each radio an accessible name.

Switches: Ensure the switch has an accessible name using aria-label or aria-labelledby, and use aria-checked to represent the switch’s state.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Switch with no accessible name -->
<div role="switch" aria-checked="false" tabindex="0"></div>

Copy

Correct Markup Solutions:

Code example

<!-- Switch with accessible name -->
<div
  role="switch"
  aria-checked="false"
  tabindex="0"
  aria-label="Enable dark mode">
</div>

<!-- Or with visible label -->
<label id="notif-label">Notifications</label>
<div
  role="switch"
  aria-checked="true"
  tabindex="0"
  aria-labelledby="notif-label">
</div>

Copy

Common Mistakes to Avoid

Using generic labels like “Toggle” or “Switch” without specifying what it controls.
Relying on adjacent text instead of programmatic association.
Forgetting to update the accessible name when the toggle’s purpose changes dynamically.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.

Related WCAG Criteria

4.1.2: Name, Role, Value