Formularfelder gruppieren – für mehr Kontext

Veröffentlicht: 14. August 2025 von Matze – Kommentar hinterlassen Letzte Aktualisierung: 3. November 2025

Als ich das erste Mal auf fieldset und legend traf, hatte ich nicht viel Ahnung über HTML und insbesondere nicht über Barrierefreiheit. Alles, was ich bemerkte, war die Besonderheit, wie eine legend innerhalb eines fieldset angezeigt wird – oder eher gesagt: am Rahmen eines fieldset.

Schnelldurchlauf bis (grob) heute: während der Arbeit an einem Kontaktformular konnte ich mich damit tiefgreifender befassen und mehr über dieses Element erfahren.

Was ist ein fieldset?

Immer wieder bin ich überrascht, wie gut Namen in HTML gewählt wurden. Und fieldset ist hier keine Ausnahme. Es ist praktisch eine Liste an Formularfeldern (Eingabefelder, Auswahlfelder, Textbereiche). Es gruppiert alle Felder darin und erstellt ein Set aus Feldern. Die legend wird als Beschreibung des fieldset verwendet (und wird so auch zu einer Beschreibung für alle der so gruppierten Formularfelder).

Ein einfaches Beispiel eines fieldset sieht so aus:

<fieldset>
	<legend>Datum</legend>
	<label for="date-day">Tag</label>
	<input name="date[day]" type="number" id="date-day">
	<label for="date-month">Monat</label>
	<input name="date[month]" type="number" id="date-month">
	<label for="date-year">Jahr</label>
	<input name="date[year]" type="number" id="date-year">
</fieldset>Code-Sprache: HTML, XML (xml)

Das Ergebnis sieht so aus:

Auf dem Bild siehst du das Standard-Design für ein fieldset: Es hat einen Rahmen, das teilweise durch den Inhalt der legend unterbrochen wird. Das ist etwas, das nicht einfach mit anderen Elementen und reinem CSS erreicht werden kann. Allerdings wirst du es da draußen selten so vorfinden.

Warum ist es wichtig?

Für Benutzer, die Websites visuell erfahren können, ist ein fieldset oftmals versteckt, da das Standard-Design oftmals geändert wird. Nur die legend ist als Beschreibung für die Gruppe der Felder sichtbar. Für Screenreader-Benutzer allerdings ist es eine ganz andere Geschichte, wenn sie durch das fieldset per Tastatur navigieren. Für jedes Feld innerhalb des fieldset kündigt der Screenreader an, dass es Teil einer Gruppe ist, und ebenfalls die Beschreibung. Es stellt sicher, dass der Benutzer immer auch den Kontext der Gruppe erfährt und dass das aktuell aktive Feld ein Teil einer spezifischen Gruppe ist.

VoiceOver zum Beispiel kündigt das fieldset als „Datum, Gruppe“ an:

Bei der Navigation zum ersten Formularfeld „Tag“, kündigt VoiceOver es als „Tag, Intervall Text bearbeiten, Datum“ an.

Zusätzlich kann die gesamte Feldgruppe innerhalb des fieldset über das Attribut disabled deaktiviert werden. Solche deaktivierten Felder sind weder bearbeitbar (sie ignorieren Benutzereingaben komplett), noch werden sie beim Absenden des Formulars mitgesendet.

Ein Hinweis dazu: überlege dir, ob du es benutzen willst. Das gilt auch für fieldset als Gesamtes.

Stelle sicher, dass Felder innerhalb eines fieldset tatsächlich miteinander verbunden sind und einen identischen Kontext benötigen. Andernfalls macht es die Ankündigung für Screenreader nur länger als sie sein muss, da der Inhalt der legend immer angekündigt wird. Verwende es nur, wenn die Verbindung zwischen den Feldern nicht selbsterklärend ist, wenn sie allein verwendet werden oder wenn du ein einzelnes Feld nicht richtig ausfüllen kannst, ohne den Kontext der Gruppe zu kennen. Während das Verbinden mehrerer Felder zu einer Gruppe, um ein Datum mit Tag, Monat und Jahr einzugeben, dir (bei Angabe einer vernünftigen legend) erklären, dass du gerade dabei bist, ein Datum auszufüllen, hat das Verbinden zweier Felder mit Vorname und Nachname keinen positiven Effekt, da diese auch unabhängig voneinander korrekt ausgefüllt werden können, ohne zu wissen, dass das jeweils andere Feld existiert.

Beispiele

Fragen mit mehreren Antwortmöglichkeiten, beispielsweise in einer Umfrage, sind ein ideales Beispiel zum Gruppieren von Formularfeldern. Du kannst die legend als Frage verwenden und Radio-Buttons als Antworten:

<fieldset>
	<legend>Wann hast du über Fieldsets das erste Mal gehört?</legend>
	
	<input type="radio" id="before-2000" name="eyes-opened" value="before 2000" />
	<label for="before-2000">Vor 2000</label><br />
	
	<input type="radio" id="between-2000-2009" name="eyes-opened" value="2000 – 2009" />
	<label for="between-2000-2009">Zwischen 2000 und 2009</label><br />
	
	<input type="radio" id="between-2010-2019" name="eyes-opened" value="2010 – 2019" />
	<label for="between-2010-2019">Zwischen 2010 und 2019</label><br />
	
	<input type="radio" id="today" name="eyes-opened" value="2020 – today" />
	<label for="today">Zwischen 2020 und heute</label><br />
</fieldset>Code-Sprache: HTML, XML (xml)

Es kann auch verwendet werden, um Felder für einen Tag, einen Monat und ein Jahr als einzelne Eingabefelder anzuzeigen, um ein spezifischen Datum anzugeben (wie hier im ersten Beispiel verwendet) sowie als Stunden und Minuten, um einen Zeitpunkt auszuwählen (wenn die nativen Zeit- und Datums-Felder keine Option sind). Oder du kannst verschiedene Felder für eine Kreditkartennummer definieren, indem du sie jeweils in Vierergruppen aufteilst. Du siehst, es gibt viele Möglichkeiten, um fieldset-Elemente zu verwenden. Du darfst sie nur nicht zu oft verwenden – denn aus vielen Möglichkeiten folgt große Verantwortung – oder so.

Stelle außerdem sicher, dass du deine fieldset-Elemente mit einem Screenreader testest, um erkennen zu können, ob das Hinzufügen eines Kontextes auf diesem Weg sinnvoll ist. Das macht es einfacher festzustellen, ob du ein fieldset oder besser nicht verbundene Formularfelder verwenden sollst.

Hinweis: Dieser Beitrag wurde im Englischen Original via des HTMHell advent calendar on day 21 veröffentlicht.

In WordPress bekommen

Mein Plugin Form Block hat einen Fieldset-Block bereits integriert, der dir erlaubt, Felder in ein fieldset zu gruppieren, ohne den darunter liegenden Code zu kennen. Es handhabt bereits alle notwendigen Dinge für dich.