A: ARIA-toggle-Felder benötigen einen zugänglichen Namen (accessible name) (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass jedes ARIA-toggle-Feld einen zugänglichen Namen (accessible name) besitzt.

Das bedeutet

Elemente, die ein An aus Verhalten haben (z. B. role="switch", role="checkbox" oder button mit aria-pressed), haben keinen programmatisch ermittelbaren Namen. Häufige Ursache: reines Icon ohne Text, fehlendes label, fehlendes aria-label oder aria-labelledby.

Auswirkung

Screenreader kündigen nur Rolle und Zustand an, aber nicht den Zweck. Nutzerinnen und Nutzer verstehen die Funktion nicht, treffen falsche Entscheidungen und es liegt ein Verstoß gegen WCAG vor.

Empfehlung

• Wenn möglich native Steuerelemente mit sichtbarem <label> verwenden.
• Bei Custom Toggles stets aria-label oder aria-labelledby setzen.
• Sichtbares Label und Accessible Name sollten übereinstimmen.
• Zustand mit aria-checked oder aria-pressed korrekt pflegen.

Beispiel

Problematisch

<button role="switch" aria-checked="false"></button>     <!-- kein Name -->
<div role="checkbox" aria-checked="true"></div>          <!-- kein Name -->
<input type="checkbox" id="news">                        <!-- kein Label -->

Besser

<label for="news2">Newsletter abonnieren</label>
<input type="checkbox" id="news2">
 
<button aria-pressed="false" aria-label="Dunkelmodus einschalten"></button>
 
<div role="switch" aria-checked="true" aria-labelledby="wifi-lbl"></div>
<span id="wifi-lbl" class="sr-only">WLAN aktivieren</span>