A: ARIA toggle fiields must have an accessible name (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that every ARIA toggle field has an accessible name.

This means

Elements that have an on/off behavior (e.g., role="switch", role="checkbox" or button with aria-pressed), do not have a programmatically determinable name. Common causes: pure icon without text, missing label, missing aria-label or aria-labelledby.

Impact

Screen readers announce only role and state, but not the purpose. Users do not understand the function, make wrong decisions, and this constitutes a WCAG violation.

Recommendation

• Use native controls with visible <label> whenever possible.
• Always set aria-label or aria-labelledby for custom toggles.
• Visible label and accessible name should match.
• Maintain state correctly with aria-checked or aria-pressed.

Example

Problematic

<button role="switch" aria-checked="false"></button>     <!-- no name -->
<div role="checkbox" aria-checked="true"></div>          <!-- no name -->
<input type="checkbox" id="news">                        <!-- no label -->

Better

<label for="news2">Subscribe to newsletter</label>
<input type="checkbox" id="news2">
 
<button aria-pressed="false" aria-label="Enable dark mode"></button>
 
<div role="switch" aria-checked="true" aria-labelledby="wifi-lbl"></div>
<span id="wifi-lbl" class="sr-only">Enable Wi-Fi</span>