ARIA toggle fields must have names

ARIA toggle fields must not be missing an accessible name

Every ARIA-based toggle control must expose a programmatic accessible name.

This appears in custom checkboxes, radios, switches, and ARIA menu items.

Users of screen readers, speech input, and braille displays rely on these names to know what the control does.

Why It Matters

People using screen readers hear only the role and state without a name (for example, "checkbox, checked"), which is meaningless without purpose.

Speech recognition users cannot issue commands like “click Dark mode” if the control lacks a matching name.

Clear naming also benefits users with cognitive and low-vision needs by reducing ambiguity and confusion.

Common Causes

• Using <div>/<span> with ARIA roles (checkbox, radio, switch) but no text, aria-label, or aria-labelledby.
• Pointing aria-labelledby to an ID that does not exist or is hidden.
• Relying solely on placeholder graphics or icons to convey meaning.
• Moving the visual label off-screen without ensuring it still computes as the name.
• Building ARIA menus with menuitemcheckbox/menuitemradio items that have no text content.
• Omitting a group label for a set of radios (radiogroup) so the set’s purpose is unclear.

How to Fix

1. Prefer native controls when possible.
   • Use input type="checkbox" and input type="radio" with an associated <label>. These compute the name automatically.
2. If you must use ARIA roles, supply a name via one of these patterns (in order of preference):
   • Visible text node inside the element (becomes the name).
   • aria-labelledby pointing to visible text.
   • aria-label with concise text (use when no visible label exists).
3. Map roles to correct naming:
   • checkbox, radio, switch, menuitemcheckbox, menuitemradio: each item must have its own name.
   • radiogroup: provide a group name (e.g., via <legend>, aria-label, or aria-labelledby) so users know what the set controls.
4. Keep state separate from the name.
   • For switches and checkboxes, the accessible name should describe the feature (e.g., "Dark mode"). The state (on/off, checked/unchecked) is conveyed by aria-checked.
5. Make the visible text match the accessible name (recommendation).
   • This supports speech input and WCAG 2.2 SC 2.5.3 Label in Name.
6. Validate references.
   • Ensure every aria-labelledby ID exists, is unique, and points to meaningful, visible text.

How to Test

Keyboard

• Tab to each toggle control.
• Confirm focus is visible and the control can be toggled with Space/Enter as appropriate.
• Ensure the label is visible and understandable near the control.

Screen reader

• With a screen reader (e.g., NVDA + Firefox, VoiceOver + Safari), navigate to each control.
• Verify the announcement includes role, name, and state (e.g., "checkbox, Email updates, checked").
• For radio groups, confirm the group name is announced before individual radio options.

Mobile/touch

• Use a screen reader (TalkBack/VoiceOver) to explore controls by touch.
• Ensure each control announces a clear name and state.

Checklist

• Every toggle has a non-empty accessible name.
• Where present, visible label text matches the accessible name.
• aria-labelledby references valid, visible text nodes.
• Radiogroups or sets have a meaningful group label.
• No control relies solely on icons or color for meaning.

Good Example

<!-- Native checkbox with label -->
<label for="newsOpt">Email updates</label>
<input id="newsOpt" type="checkbox" name="news" />

<!-- ARIA checkbox with aria-labelledby -->
<span id="tipsLbl">Show hints</span>
<div role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tipsLbl"></div>

<!-- ARIA menu with named radio items -->
<ul role="menu" aria-label="Text size">
  <li role="menuitemradio" aria-checked="false">Small</li>
  <li role="menuitemradio" aria-checked="true">Medium</li>
  <li role="menuitemradio" aria-checked="false">Large</li>
</ul>

<!-- Native radio group with group label -->
<fieldset>
  <legend>Delivery method</legend>
  <label><input type="radio" name="delivery" value="standard" /> Standard</label>
  <label><input type="radio" name="delivery" value="express" /> Express</label>
</fieldset>

<!-- Switch with clear feature name -->
<div role="switch" aria-checked="false" tabindex="0" aria-label="Dark theme"></div>

Bad Example

<!-- Checkbox without any name -->
<div role="checkbox" aria-checked="true"></div>

<!-- menuitemradio with no text or label -->
<ul role="menu">
  <li role="menuitemradio" aria-checked="true"></li>
</ul>

<!-- Radio without label or name -->
<div role="radio" aria-checked="false" tabindex="0"></div>

<!-- Switch that exposes only state words, not purpose -->
<div role="switch" aria-checked="true"><span>On</span><span>Off</span></div>

<!-- Invalid aria-labelledby reference -->
<div role="checkbox" aria-checked="false" aria-labelledby="missingId"></div>

Quick Checklist

• Each checkbox, radio, switch, menuitemcheckbox, and menuitemradio has a clear accessible name.
• Group related radios and provide a group name (legend or aria-labelledby).
• Prefer native HTML controls and <label> where possible.
• When using ARIA, use visible text, aria-labelledby, or aria-label (in that order).
• Keep the name about the feature, not the state; state is conveyed by aria-checked.
• Ensure aria-labelledby IDs exist and reference visible, meaningful text.
• Test with keyboard and at least one desktop and one mobile screen reader.