Standards · ARIA

Rolle Widget

radio

Kennzeichnet ein Element als einzelne Option in einer Gruppe mit gegenseitigem Ausschluss. Ein Radio-Element muss sich innerhalb einer radiogroup (oder eines nativen fieldset) befinden. Bevorzugt wird <input type="radio">; role="radio" kommt nur zum Einsatz, wenn das native Input nicht möglich ist.

Einsatzbereiche

Empfohlen wird <input type="radio">, gruppiert über ein gemeinsames name-Attribut, eingebettet in <fieldset> mit einer <legend>. Das native Element übernimmt Pfeiltastennavigation, den wandernden Tabindex, die exklusive Auswahl und die Formularübermittlung ohne zusätzlichen Aufwand.

role="radio" ist für benutzerdefinierte Komponenten gedacht — segmentierte Steuerelemente, Bewertungs-Widgets, gestaltete Auswahlelemente — bei denen das native Input nicht verwendet werden kann. Ein Element mit role="radio" MUSS ein übergeordnetes Element (oder ein aria-owns-Ziel) mit role="radiogroup" besitzen.

Tastatur- und Fokus-Vertrag

Gemäß dem APG-Radio-Gruppen-Muster:

  • Tab verschiebt den Fokus in die Gruppe, auf das ausgewählte Radio-Element (oder auf das erste, wenn keines ausgewählt ist).
  • Tab verschiebt den Fokus AUS der Gruppe heraus. Tab wechselt NICHT zwischen den Radio-Elementen.
  • Pfeiltasten (Auf/Ab oder Links/Rechts) verschieben den Fokus zum nächsten bzw. vorherigen Radio-Element UND wählen es aus. Dies ist ungewöhnlich — die meisten Widgets trennen Fokus von Auswahl, aber Radio-Elemente koppeln beides.
  • Leertaste wählt das fokussierte Radio-Element aus, sofern es nicht bereits ausgewählt ist.

Es wird ein wandernder Tabindex verwendet: nur das aktuell ausgewählte Radio-Element hat tabindex="0", alle anderen haben tabindex="-1".

Häufige Fehler

  • Benutzerdefinierte Radio-Elemente, bei denen Tab zwischen jeder Option wechselt (statt der Pfeiltasten). Das bricht das standardmäßige Radio-Interaktionsmodell.
  • role="radio" ohne umschließendes role="radiogroup". Screenreader können weder die Gruppenbezeichnung noch die Position innerhalb der Gruppe ankündigen.
  • Alle Radio-Elemente mit tabindex="0" — jedes Element tritt in die Tab-Reihenfolge ein und vervielfacht die benötigten Tastenanschläge.
  • Fehlendes aria-checked beim ersten Rendern.
  • Benutzerdefinierte Radio-Elemente, die beim erneuten Klicken die Auswahl aufheben. Ein Radio-Element ist exklusiv: einmal ausgewählt, kann es nur durch Auswahl eines anderen Elements in der Gruppe abgewählt werden.

Beispiel

<!-- Bevorzugt -->
<fieldset>
  <legend>Benachrichtigungshäufigkeit</legend>
  <label><input type="radio" name="freq" value="daily" checked> Täglich</label>
  <label><input type="radio" name="freq" value="weekly"> Wöchentlich</label>
  <label><input type="radio" name="freq" value="never"> Nie</label>
</fieldset>

<!-- Benutzerdefinierte Radio-Gruppe -->
<div role="radiogroup" aria-labelledby="freqLabel">
  <span id="freqLabel">Benachrichtigungshäufigkeit</span>
  <div role="radio" aria-checked="true"  tabindex="0">Täglich</div>
  <div role="radio" aria-checked="false" tabindex="-1">Wöchentlich</div>
  <div role="radio" aria-checked="false" tabindex="-1">Nie</div>
</div>