fieldset & legend richtig einsetzen

<fieldset> fasst Bedienelemente zusammen, die nur gemeinsam Sinn ergeben, und <legend> ist die Frage über dieser Gruppe – sie wird Screenreadern zu jedem Feld der Gruppe mitgeliefert. Ohne diese Klammer hört man nur die Antworten („Standard“, „Express“, „Abholung“) und nie die Frage, zu der sie gehören.

Ein einzelnes <label> benennt genau ein Feld. Manche Fragen verteilen sich aber auf mehrere Felder, und optisch löst man das mit einer Überschrift darüber. Das ist der Punkt, an dem es kippt: Wer im Formularmodus eines Screenreaders von Feld zu Feld springt, kommt an dieser Überschrift gar nicht vorbei.

Das Wichtigste in Kürze

• <fieldset> gruppiert, <legend> benennt die Gruppe. Die <legend> muss das erste Kind des <fieldset> sein, sonst geht die Zuordnung verloren.
• Für Radio-Gruppen ist die Gruppierung praktisch Pflicht – einzelne Optionen beantworten die Frage nicht, die sie beantworten sollen.
• Wie oft die Legende vorgelesen wird, entscheidet der Screenreader: bei jedem Feld, einmal beim Betreten oder gar nicht. Deshalb Legende kurz halten und jedes Label für sich verständlich formulieren.
• Pflichtangaben gehören in die <legend> („Versandart (Pflichtangabe)“), nicht an ein einzelnes Optionsfeld.
• Eine einzelne Checkbox braucht kein fieldset – sie trägt ihre Aussage im eigenen Label.
• Das Attribut disabled am <fieldset> deaktiviert alle Felder darin in einem Schritt; nur Bedienelemente in der ersten <legend> bleiben aktiv.
• Der Nachbau mit role="group" oder role="radiogroup" plus aria-labelledby ist möglich, aber überflüssig, solange fieldset einsetzbar ist.

Der Standardfall: Radio-Buttons

Radio-Buttons sind der Paradefall, weil sie nur in der Gruppe eine Bedeutung haben. Drei Optionen ohne Frage sind drei Wörter ohne Zusammenhang:

<fieldset>
  <legend>Versandart</legend>

  <label><input type="radio" name="versand" value="standard" /> Standard</label>
  <label><input type="radio" name="versand" value="express" /> Express</label>
  <label><input type="radio" name="versand" value="abholung" /> Abholung</label>
</fieldset>

Ein Screenreader kündigt das beim Betreten der Gruppe als „Versandart, Gruppierung, Standard, Optionsfeld, 1 von 3“ an. Jedes Radio behält sein eigenes Label; das eine ersetzt das andere nicht. Und die Verbindung der Optionen zu einer Auswahl kommt nicht vom fieldset, sondern vom gemeinsamen name – das sind zwei verschiedene Mechanismen, die man leicht verwechselt.

Wie oft die Legende vorgelesen wird

Das W3C hält im Tutorial „Grouping Controls“ eine Unschärfe fest, die in der Praxis wichtig ist: Manche Screenreader sagen die Legende bei jedem Formularelement der Gruppe an, manche einmal beim Betreten, manche in seltenen Fällen gar nicht.

Daraus folgen zwei Regeln, die sich auf den ersten Blick widersprechen und es nicht tun:

1. Die Legende bleibt kurz. „Versandart“ statt „Bitte wählen Sie aus, auf welche Weise Ihre Bestellung zu Ihnen kommen soll“. Bei fünf Optionen wird ein langer Satz fünfmal vorgelesen.
2. Jedes Label bleibt für sich verständlich. Wenn ein Screenreader die Legende nur einmal nennt und der Nutzer drei Felder später zurückspringt, muss „Express“ auch ohne sie funktionieren. „Ja“ und „Nein“ als Labels sind in dieser Hinsicht ein Problem, „Ja, Newsletter abonnieren“ nicht.

Checkbox-Gruppen und größere Abschnitte

Dasselbe Muster trägt überall dort, wo mehrere Felder unter einer gemeinsamen Frage stehen:

<fieldset>
  <legend>Welche Themen interessieren dich?</legend>

  <label><input type="checkbox" name="thema" value="html" /> HTML</label>
  <label><input type="checkbox" name="thema" value="a11y" /> Barrierefreiheit</label>
  <label><input type="checkbox" name="thema" value="seo" /> SEO</label>
</fieldset>

Auch größere Abschnitte langer Formulare lassen sich so gliedern – „Rechnungsadresse“ und „Lieferadresse“ als zwei fieldset. Das gibt dem Formular eine Struktur, die nicht nur optisch, sondern auch programmatisch existiert, und hilft besonders bei mehrstufigen Strecken, wo der Überblick über den aktuellen Abschnitt schnell verloren geht.

Bei Abschnitten dieser Größe ist eine Überschrift zusätzlich sinnvoll: Die <legend> richtet sich an den Formularmodus, eine <h2> die Überschriftennavigation. Beides zu haben ist kein Widerspruch, sondern deckt zwei verschiedene Navigationswege ab. Details zur Hierarchie unter Überschriften-Hierarchie.

Pflichtangaben und Fehler an der Gruppe

Eine Radio-Gruppe, die ausgefüllt werden muss, ist der häufigste Fall, in dem die Kennzeichnung an der falschen Stelle landet. Sie gehört in die Legende:

<fieldset>
  <legend>Versandart (Pflichtangabe)</legend>
  …
</fieldset>

Und wenn die Gruppe leer bleibt? Dann trifft die Fehlermeldung die Gruppe, nicht ein einzelnes Feld. Der stabilste Weg, den ich kenne, ist eine Meldung direkt unter der Legende, verknüpft über aria-describedby am <fieldset>:

<fieldset aria-describedby="versand-fehler">
  <legend>Versandart (Pflichtangabe)</legend>
  <p id="versand-fehler" class="fehler">
    Bitte wählen Sie eine Versandart. Ohne Auswahl kann die Bestellung nicht abgeschickt
    werden.
  </p>
  …
</fieldset>

aria-invalid an einer Gruppe ist dagegen ein Attribut mit unzuverlässiger Wirkung – es ist für einzelne Eingabefelder gedacht. Die Fehlerbehandlung im Ganzen, inklusive Fehlerzusammenfassung am Formularanfang, steht unter Fehlermeldungen barrierefrei und erfüllt damit 3.3.1.

Wann ich darauf verzichte

fieldset ist kein Allheilmittel. Ich würd es nicht um jedes Formular legen – eine Gruppe ohne erkennbares gemeinsames Thema bläht die Screenreader-Ausgabe auf, weil die Legende dann bei jedem Feld ohne Mehrwert wiederholt wird.

Meine Faustregel nach einigen Formular-Audits: fieldset/legend immer für Radio- und Checkbox-Gruppen, gern für klar abgegrenzte Abschnitte – aber nicht für eine Reihe unabhängiger Felder wie Name, E-Mail und Telefon. Die tragen ihre Bedeutung schon im eigenen Label, und ein fieldset mit der Legende „Ihre Daten“ macht die Ausgabe nur länger, ohne eine Frage zu beantworten.

Verschachtelte fieldset sind der Grenzfall, bei dem ich fast immer umbaue. Zwei Ebenen bedeuten zwei vorangestellte Legenden pro Feld – „Ihre Daten, Kontakt, Telefon, Eingabe“. Wenn die Verschachtelung inhaltlich nötig scheint, ist das meist ein Hinweis darauf, dass das Formular in zwei Schritte gehört.

Das leidige Styling

Wer fieldset lange gemieden hat, tat das selten aus inhaltlichen Gründen, sondern wegen der Optik: der Standard-Rahmen und die eingebettete legend. Heute ist das entschärft. Rahmen und Innenabstand zurücksetzen, Legende wie eine normale Beschriftung behandeln:

fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-inline-size: 0; /* verhindert, dass Inhalte den Container aufblasen */
}

legend {
  padding: 0;
  font-weight: 600;
}

Die Zeile min-inline-size: 0 ist der Trick, den man einmal sucht und dann nie wieder vergisst: <fieldset> hat eine eingebaute Mindestbreite nach seinem Inhalt, und lange, nicht umbrechende Inhalte sprengen damit Flexbox-Layouts. Auch display: flex und display: grid funktionieren am <fieldset> in allen aktuellen Browsern – die jahrelangen Einschränkungen dabei sind Geschichte.

Wichtig bleibt: Das ist eine rein visuelle Entscheidung. Die semantische Verbindung zwischen Gruppe und Beschriftung bleibt erhalten, egal wie der Rahmen aussieht. Genau deshalb ist die Optik nie ein guter Grund, auf das Element zu verzichten.

Die Alternative mit ARIA – und warum nativ gewinnt

Theoretisch lässt sich eine Gruppe auch mit role="group" oder role="radiogroup" plus aria-labelledby nachbauen. Praktisch brauche ich das fast nie:

<!-- Nur wenn fieldset partout nicht möglich ist: -->
<div role="radiogroup" aria-labelledby="versand-titel">
  <p id="versand-titel">Versandart</p>
  …
</div>

Der Nachbau hat drei Nachteile. Er braucht ein zusätzliches Attribut mit korrekter ID-Referenz, er verliert das praktische disabled am Container, und role="radiogroup" erzeugt die Erwartung eines eigenen Tastaturmodells – bei echten <input type="radio">-Elementen liefert der Browser das, bei nachgebauten Optionen musst du Pfeiltasten und Roving Tabindex selbst schreiben. Das ist die erste Regel von ARIA in Reinform: Das native Element kann es bereits, und zwar zuverlässiger.

Ein legitimer Fall bleibt: Wenn die Gruppe aus Bedienelementen besteht, die keine echten Formularfelder sind – etwa eine Reihe von Toggle-Buttons –, dann ist role="group" mit aria-labelledby der richtige Weg, weil fieldset dort nichts zu gruppieren hätte.

Häufige Fehler

• legend nicht an erster Stelle. Sie muss das erste Kind des <fieldset> sein.
• Radio-Gruppe ohne fieldset. Die Frage existiert dann nur optisch.
• fieldset um alles legen. Thematisch leere Gruppen verlängern jede Ansage.
• Verschachtelte fieldset. Zwei Legenden pro Feld sind kaum noch zu hören.
• Pflichtkennzeichnung an einem einzelnen Radio statt in der Legende.
• Gleicher name vergessen. Ohne ihn sind es einzelne Schalter, keine Auswahl – unabhängig vom fieldset.
• Legende als ganzer Satz. Wird bei jedem Feld wiederholt und macht die Gruppe zäh.

Häufige Fragen

Brauche ich fieldset auch für eine einzelne Checkbox?

Nein. Eine einzelne Checkbox wie „AGB akzeptieren“ trägt ihre Aussage komplett im eigenen Label. fieldset lohnt sich erst, sobald mehrere Optionen eine gemeinsame Frage beantworten. Bei genau zwei Optionen ist es eine Ermessensfrage – ich gruppiere dann, wenn die Frage nicht schon in den Labels steckt.

Kann eine Gruppe als Pflichtangabe markiert werden?

Ja, über die <legend> – etwa „Versandart (Pflichtangabe)“. Ein required an jedem einzelnen Radio derselben Gruppe wirkt im Browser wie ein required an der Gruppe, die Fehlermeldung fällt aber je nach Browser unterschiedlich aus. Mehr dazu unter Validierung & Pflichtfelder.

Wird die legend wirklich bei jedem Feld vorgelesen?

Bei den meisten Screenreadern ja – und das ist gewollt. Genau deshalb sollte sie kurz sein und nur dort stehen, wo die Wiederholung hilft. Verlassen darf man sich darauf allerdings nicht: Es gibt Programme, die sie nur beim Betreten der Gruppe nennen.

Was macht disabled am fieldset?

Es deaktiviert alle Formularfelder innerhalb der Gruppe in einem Zug, und sie werden beim Absenden nicht übertragen. Praktisch für Abschnitte, die von einer vorherigen Auswahl abhängen. Eine Ausnahme gibt es: Bedienelemente innerhalb der ersten <legend> bleiben bedienbar.

Ersetzt eine Überschrift die Legende?

Nein. Eine <h3> über der Gruppe ist über die Überschriftennavigation erreichbar, wird aber im Formularmodus übersprungen – und genau dort wird ausgefüllt. Beides zusammen ist zulässig und oft die beste Lösung.

Fazit

<fieldset> und <legend> sind das richtige Werkzeug, sobald mehrere Felder eine gemeinsame Frage beantworten – allen voran Radio- und Checkbox-Gruppen. Sie liefern den Gruppenkontext rein semantisch, ohne ein einziges ARIA-Attribut, und überstehen jedes Re-Design.

Der ganze Aufwand besteht darin, die Legende kurz zu halten, sie an die erste Stelle zu setzen und die Pflichtkennzeichnung dort unterzubringen. Sparsam eingesetzt, machen die beiden Elemente aus einer Ansammlung von Feldern ein verständliches Formular; überall verteilt machen sie es zäh. Die Grundlagen zum Rest des Formulars stehen in der Formular-Semantik.

Quellen

• Grouping Controls (W3C WAI – fieldset/legend, role=group und der Hinweis auf unterschiedliches Screenreader-Verhalten)
• The fieldset element (HTML Living Standard – legend als erstes Kind, Wirkung von disabled)