Radio Buttons in HTML
Eine Frage, eine Antwort, ein Name
Optionstext und Frage: zwei Stellen an jeder Optionsgruppe.
Radio Button in HTML
Eine Auswahl, vier Verbindungen
Die sichtbaren Kreise sind nur das Ergebnis. Eine robuste Radiogruppe verbindet Frage, Optionstext, Auswahlzustand und gesendeten Wert im HTML.
Auswahlfluss
Von „Versandart“ bis versand=express
◉ Gewählte Option
Die Frage gibt jeder Option den Gruppenkontext.
- id
abholung- name
versand- value
abholung
- id
standard- name
versand- value
standard
- id
express- name
versand- value
express
name="versand"value="express"name macht die Optionen gegenseitig exklusiv. Die id bleibt je Option eindeutig, damit ihr label genau den richtigen Kreis benennt. Gesendet wird nur der Wert der Auswahl. Kopierfähige Basis
Die vollständige Radiogruppe
<fieldset>
<legend>Versandart</legend>
<div>
<input
type="radio"
name="versand"
id="abholung"
value="abholung"
required>
<label for="abholung">Abholung im Laden</label>
</div>
<div>
<input
type="radio"
name="versand"
id="standard"
value="standard"
required>
<label for="standard">Standardversand</label>
</div>
<div>
<input
type="radio"
name="versand"
id="express"
value="express"
aria-describedby="express-hinweis"
required>
<label for="express">Express</label>
<span id="express-hinweis">
Zustellung am nächsten Werktag
</span>
</div>
</fieldset>Native Tastaturspur
Tab betritt die Gruppe. Pfeile wählen.
Native input type="radio" bringen diese Bedienung bereits mit. Eine nachgebaute ARIA-Radiogruppe müsste Fokus und Auswahl selbst programmieren.
- TabIn die GruppeFokus auf der gewählten Option
- ↓→Nächste OptionFokus und Auswahl wechseln
- ↑←Vorige OptionFokus und Auswahl wechseln
- TabAus der GruppeWeiter zum nächsten Bedienelement
Schnelldiagnose
Drei Beziehungen im DOM prüfen
Alle zugehörigen Radios haben exakt denselben name.
Jede id kommt im Dokument nur einmal vor.
Das for des sichtbaren label trifft diese id.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Die Optionen haben keinen Namen Regel label
Der Text neben dem Radio Button ist nur ein span. Ein label mit for macht ihn zum Namen der Option.
Prüfen Zwei Beschriftungen an derselben Option Regel form-field-multiple-labels
Zeigen zwei label auf dieselbe ID, bleibt offen, was vorgelesen wird. Der Zusatz wird zum Hinweis mit aria-describedby.
Zum Mitnehmen
Die Optionsgruppe, korrigiert
Ein fieldset für die Frage, ein label je Option.
Korrektur in 3 Schritten ansehen
Jede Option beschriften
Ein label, per for mit dem Feld verbunden, wird zum Namen der Option. Der Klick auf den Text wählt sie aus.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="radio" name="versand" id="abholung" value="abholung"> <span>Abholung im Laden</span>Nachher
<input type="radio" name="versand" id="abholung" value="abholung"> <label for="abholung">Abholung im Laden</label>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Abholung im Laden“. Wird die Option ausgewählt, ist der Name verbunden.
Die Frage mit fieldset gruppieren
legend nennt die Frage über allen Optionen. Hilfstechnik kann diesen Gruppenkontext zusammen mit den einzelnen Optionen ausgeben.
KorrekturvergleichSchritt 2 · HTML Vorher
<p>Versandart</p> <input type="radio" name="versand" id="abholung" value="abholung"> <label for="abholung">Abholung im Laden</label>Nachher
<fieldset> <legend>Versandart</legend> <input type="radio" name="versand" id="abholung" value="abholung"> <label for="abholung">Abholung im Laden</label> </fieldset>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit der Tab-Taste in die Gruppe. Prüfen Sie, ob „Versandart“ als Kontext der gewählten Option ausgegeben wird.
Den Zusatz zum Hinweis machen
Ein zweites label an derselben ID ist mehrdeutig. Als span mit aria-describedby bleibt der Zusatz erhalten und folgt dem Namen.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="express">Express</label> <input type="radio" name="versand" id="express" value="express"> <label for="express">Zustellung am nächsten Werktag</label>Nachher
<label for="express">Express</label> <input type="radio" name="versand" id="express" value="express" aria-describedby="express-hinweis"> <span id="express-hinweis">Zustellung am nächsten Werktag</span>Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie mit einer Sprachausgabe, ob „Express“ als Name und der Zustelltext als ergänzende Beschreibung verfügbar sind.