fieldset und legend
Eine Gruppe braucht einen gemeinsamen Namen
Optionsgruppe, Einzel-Label, Hilfetext: drei Stellen im Formular.
Formularstruktur
Eine Frage über allen Antworten
Das fieldset zieht die Grenze. Das legend nennt den gemeinsamen Kontext. Jedes label benennt weiterhin genau eine Option.
Anatomie einer Optionsgruppe
Konzeptdarstellung: links die sichtbare Gruppe, rechts ihre vereinfachte Semantik.
Wählen Sie genau eine Option.
Accessibility Tree, vereinfacht
<legend>- RadioStandardnicht ausgewählt
- RadioExpressausgewählt
- RadioAbholungnicht ausgewählt
Der genaue Wortlaut und die Wiederholung des Gruppennamens hängen von Browser und Vorleseprogramm ab.
<fieldset>Grenzt abWelche Felder gehören zusammen?
<legend>FragtWas entscheidet die ganze Gruppe?
<label>BenenntWofür steht diese eine Option?
Gleiche Feldnamen, anderer Zusammenhang
Erst die beiden Legenden unterscheiden, welche Adresse gemeint ist.
Optionsgruppe zum Kopieren
<fieldset>
<legend>Versandart</legend>
<p>Wählen Sie genau eine Option.</p>
<label>
<input type="radio" name="versand"
value="standard">
Standard, 3 bis 5 Werktage
</label>
<label>
<input type="radio" name="versand"
value="express" checked>
Express, 1 Werktag
</label>
<label>
<input type="radio" name="versand"
value="abholung">
Abholung im Laden
</label>
</fieldset> Das gemeinsame name="versand" bildet die Radio-Gruppe. Die einzelnen label bleiben nötig; das legend liefert nur den Gruppenkontext.
Adressgruppe zum Kopieren
<fieldset>
<legend>Lieferadresse</legend>
<label for="strasse">Straße und Hausnummer</label>
<input id="strasse" name="strasse" type="text"
autocomplete="shipping street-address">
<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" type="text"
autocomplete="shipping postal-code">
<label for="ort">Ort</label>
<input id="ort" name="ort" type="text"
autocomplete="shipping address-level2">
</fieldset> Verwenden Sie solche Gruppen, wenn der gemeinsame Name die Einzelfelder unterscheidet. Verschachteln Sie fieldset nicht ohne fachlichen Grund.
So prüfen Sie die Gruppe
legendals erstes Kind jedesfieldsetkontrollieren.- Jede Option braucht zusätzlich ein eigenes, eindeutiges
label. - Mit Tab in die Radio-Gruppe, mit Pfeiltasten zwischen Optionen wechseln.
- Mit einem Vorleseprogramm Gruppenname, Option und Zustand gemeinsam prüfen.
Aus dem Prüfbericht
Zwei Regeln, zwei Fundstellen
Kritisch Die Optionsgruppe hat keinen gemeinsamen Namen Regel label
Über den drei Versandarten steht nur ein Absatz. Ein fieldset mit legend macht diese Frage zum Namen der ganzen Gruppe.
Prüfen Zwei Beschriftungen an einem Feld Regel form-field-multiple-labels
Am Feld für die Wunschzeit hängen zwei label. Eins bleibt der Name, der Zusatz wird über aria-describedby zum Hinweis.
Zum Mitnehmen
Die Formulargruppe, korrigiert
Zwei Änderungen im HTML. Die Einzel-Labels bleiben erhalten.
Korrektur in 2 Schritten ansehen
Die Optionsgruppe in ein fieldset setzen
Aus dem div mit Absatz wird ein fieldset mit legend. Das legend benennt alle drei Optionen gemeinsam und ersetzt die Einzel-Labels nicht.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="versand"> <p>Versandart</p> <label><input type="radio" name="versand" value="standard"> Standard</label> <label><input type="radio" name="versand" value="express"> Express</label> </div>Nachher
<fieldset class="versand"> <legend>Versandart</legend> <label><input type="radio" name="versand" value="standard"> Standard</label> <label><input type="radio" name="versand" value="express"> Express</label> </fieldset>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit einem Vorleseprogramm durch die Optionen. Gruppenname und Optionslabel müssen als Zusammenhang erkennbar sein; der genaue Wortlaut hängt von Programm und Browser ab.
Den Zusatztext als Hinweis verknüpfen
Das zweite label wird ein span. aria-describedby verbindet es als Hinweis mit dem Feld. Der Name bleibt „Wunschzeit“, der Text bleibt sichtbar.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="wunschzeit">Wunschzeit</label> <input id="wunschzeit" type="time"> <label for="wunschzeit">Zwischen 8 und 18 Uhr</label>Nachher
<label for="wunschzeit">Wunschzeit</label> <input id="wunschzeit" type="time" aria-describedby="wunschzeit-hinweis"> <span id="wunschzeit-hinweis">Zwischen 8 und 18 Uhr</span>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Wunschzeit“. Der Cursor springt ins Feld, der Zusatz bleibt daneben stehen.