Back to Learn
Pulseaccessibility

ARIA Toggle Fields Have Accessible Names

Ensure ARIA toggle fields like checkboxes and switches have accessible names.

What This Audit Checks

This audit verifies that elements with toggle roles -- checkbox, menuitemcheckbox, menuitemradio, radio, and switch -- have accessible names. Toggle fields represent on/off or selected/unselected states, and the name tells users what they are toggling.

Why It Matters

A toggle without a name announces its state ("checked" or "not checked") but not its purpose. Users cannot make informed decisions about whether to activate an unlabeled toggle.

How to Fix It

  • Add visible text content inside the toggle element.
  • Use aria-label for icon-only toggles.
  • Use aria-labelledby to reference a nearby visible label.
  • Prefer native <input type="checkbox"> with a <label> element for automatic naming.
<!-- Bad: no accessible name -->
<div role="switch" aria-checked="false"></div>

<!-- Good: aria-label provides the name -->
<div role="switch" aria-checked="false" aria-label="Dark mode"></div>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources