Aria toggle field name

What it is

An "accessible name" is the text a screen reader speaks aloud when a user focuses on an interactive control. Toggle fields — checkboxes, toggle switches, and buttons with `role="switch"` or `aria-pressed` — must each have a clear, unique label that describes exactly what the toggle does. This is WCAG Success Criterion 4.1.2 (Name, Role, Value). When a toggle has no accessible name, a screen reader user hears something useless like "checkbox" or "button" with no explanation of its purpose.

Why it matters

Screen reader users — a significant portion of shoppers with visual or motor disabilities — cannot use your site if controls lack accessible names. In many countries (including the US under the ADA, and the EU under EAA/EN 301 549) this is a legal accessibility requirement, and lawsuits over inaccessible e-commerce sites are common and costly. Beyond legal risk, roughly 7–8 million Americans use screen readers; unnamed toggles are a complete conversion blocker for them. Google also factors accessibility into site quality signals, so persistent WCAG failures can indirectly hurt your search rankings.

How to fix it

1. Identify every toggle control on the page: standard checkboxes (<input type='checkbox'>), custom toggle switches (often a <div> or <span> styled as a switch), and buttons using aria-pressed or role='switch'.
2. For standard HTML checkboxes, wrap the input in a <label> element or add a matching 'for' attribute on a separate <label> that references the input's 'id'. This is always the preferred approach.
3. For icon-only or visually hidden toggle buttons (e.g. a sun/moon icon for dark mode), add an aria-label attribute directly on the element with a short, descriptive phrase (e.g. aria-label='Toggle dark mode').
4. For custom toggle components that already have visible text nearby but it is not programmatically linked, use aria-labelledby pointing to the id of the visible text element.
5. For cases where a visible label is not desirable (purely icon-driven UI), add a visually-hidden span inside the element using a CSS class that hides text visually but keeps it in the accessibility tree (e.g. clip pattern).
6. Test with a screen reader (NVDA + Chrome on Windows, VoiceOver + Safari on Mac/iOS) or re-run an automated axe/Lighthouse scan to confirm each toggle announces a meaningful name when focused.

<!-- Option 1: Standard checkbox with <label> -->
<label for="subscribe-newsletter">
  Subscribe to newsletter
</label>
<input type="checkbox" id="subscribe-newsletter" name="subscribe">

<!-- Option 2: aria-label on a custom toggle button -->
<button role="switch" aria-checked="false" aria-label="Enable email notifications">
  <span class="toggle-thumb"></span>
</button>

<!-- Option 3: aria-labelledby referencing visible text -->
<span id="wifi-label">Wi-Fi</span>
<div role="switch" aria-checked="true" aria-labelledby="wifi-label" tabindex="0"></div>

<!-- Option 4: Visually-hidden label text (CSS clip pattern) -->
<style>
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>
<button aria-pressed="false">
  <span class="sr-only">Toggle dark mode</span>
  🌙
</button>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Forms tutorial — W3C WAI
• ARIA basics — MDN