Provide accessible names for toggle fields

Toggle fields like checkboxes and switches are unusable for screen reader users if they don't have a label, as the user won't know what they are turning on or off.

Quick Reference

• Use aria-label, aria-labelledby, or <label> for checkboxes and radios
• Ensure the label clearly describes the state or action of the toggle
• Avoid empty or non-descriptive labels for switches

Check

Check all toggle fields (checkboxes, radio buttons, switches) for a valid accessible name.

Fix

Add an accessible name to the toggle field using a label element, aria-label, or aria-labelledby.

Explain