Verwendung
Fieldset und Legend können optional verwendet werden, um inhaltlich zusammenhängende Formularelemente zu gruppieren, voneinander abzugrenzen und eindeutig zu beschriften. Bitte beachten Sie hierbei die Hinweise zu Texten in Legends im Tab Barrierefreiheit.
Fieldset und Legend dienen ausschließlich der Gruppierung von Formularelementen (“A Set of Fields”) und dürfen nicht zur Strukturierung von reinen Textinhalten anstelle von Überschriften verwendet werden.
Aufbau
Durch das zwingend erforderliche erste Kind-Element <legend> wird eine Beschreibung der logischen Einheit bereitgestellt. Dies kann in Form einer Fragestellung (“Ihre Adresse“) oder als knappe Kategorisierung (“Daten zum KFZ“) geschehen.
Hierbei muss darauf geachtet werden, dass der Text der Legend möglichst kurz und prägnant gehalten wird, da verbreitete Screenreader diesen Text allen Labels der enthaltenen Formularelementen erneut voranstellen.
Fieldsets als Ganzes können optional ein der Gruppe zugeordnetes Tooltip erhalten. Als statische, rein gruppierende Strukturelemente besitzen fieldset und legend mit Ausnahme von disabled keine Zustände.
<fieldset>
<legend>Erstzulassung</legend>
<div>
<label for="tag">Tag</label>
<input type="text" name="tag" id="tag">
</div>
<div>
<label for="monat">Monat</label>
<input type="text" name="monat" id="monat">
</div>
[…]
</fieldset>Alternative mit WAI-ARIA
Nur wenn die native HTML-Semantik aufgrund der verwendeten Frameworks nicht möglich ist, dann kann die Gruppierung auch über WAI-ARIA-Attribute hergestellt werden. Hierbei muss zwingend beachtet werden, dass die Funktion einer beschreibenden Legende über weitere ARIA-Attribute hergestellt werden muss.
<div role="group" aria-labelledby="erstzulassung">
<p id="erstzulassung">Erstzulassung</p>
<div>
<label for="tag">Tag</label>
<input type="text" name="tag" id="tag">
</div>
<div>
<label for="monat">Monat</label>
<input type="text" name="monat" id="monat">
</div>
[…]
</div>Mischformen aus fieldset, role="group" und Überschriften-Elementen, z. B. H5 als Legend-Ersatz ohne weitere logische Verknüpfung dürfen nicht innerhalb einer Maske oder einer Formularstrecke verwendet werden.
Pflichtfelder
Wenn ein Fieldset ausnahmslos Pflichtfelder enthält, dann kann die Kennzeichnung auch über eine entsprechende Markierung an der Legend der Gruppe geschehen; die Pflicht zur Kennzeichnung aller einzelen Felder innerhalb dieses Fieldsets entfällt dann. Falls Nutzende diese übersehen, dann werden die entsprechenden Fehlermeldungen weiterhin an den enthaltenen fehlerhaften Formularelementen angezeigt
Rahmen
Fieldset können in begründeten Ausnahmen mit sichtbarem Rahmen verwendet werden, wenn sie eigenständige Bereiche darstellen, die optisch abgegrenzt werden sollen. Standardmäßig sollen sie jedoch rahmenlos eingebunden werden, wenn das Fieldset nur der semantischen Unterteilung dient und die zugeordnete Legend eine Art übergeordnete Beschriftung für eine Gruppe von enthaltenen Formularelementen bildet und deren Sinn und Zweck erklärt.
Inaktive Fieldsets
Wenn ein komplettes <fieldset> mit einem disabled-Attribut versehen wird, dann werden alle darin enthaltenen Formularelemente inaktiv, mit Ausnahme von möglichen Formularelementen in der <legend>.
Auf diese Möglichkeit sollte jedoch verzichtet werden, solange der Internet Explorer 11 mit seinen vielen Bugs noch zu den Ziel-Browsern gehört. In diesem werden enthaltene Felder zwar inaktiv dargestellt, sind aber weiterhin bedienbar. Die Lösung ist hier, stattdessen alle enthaltenen Formularelemente auf disabled zu setzen und dies auch gestalterisch zu unterstützen.
Icons
Icons sind für Fieldset und insbesondere für Legend nicht vorgesehen.
Do’s and Dont’s
So:
- Elemente gruppieren, wenn die Legende zusammen mit den enthaltenen Formularelementen eine sinnvolle Aussage bildet
- Elemente gruppieren, wenn die Legende eine erklärende Funktion für enthaltene Formularelemente ist
So nicht:
- Überlange Legendentexte
- Inhaltlich nicht zusammenhängende Formularelemente gruppieren
- Fieldsets als Gliederung für Textinhalte
