fieldset & legend richtig einsetzen

Ein einzelnes <label> benennt genau ein Feld. Doch manche Fragen verteilen sich auf mehrere Felder: „Wie möchten Sie bezahlen?“ steht über drei Radio-Buttons, nicht über einem. Genau für diese übergeordnete Beschriftung gibt es <fieldset> und <legend>.

<fieldset> fasst zusammengehörige Bedienelemente zu einer Gruppe zusammen, <legend> ist deren Überschrift. Beide zusammen sorgen dafür, dass ein Screenreader bei jedem Feld nicht nur dessen eigenes Label vorliest, sondern auch die Frage, zu der es gehört. Ohne Gruppierung hört man nur „Standard“, „Express“, „Abholung“ – und weiß nicht, worum es überhaupt geht.

Der Standardfall: Radio-Buttons

Radio-Buttons sind der Paradefall für fieldset/legend, weil sie nur in der Gruppe Sinn ergeben. Die <legend> muss dabei das erste Kind des <fieldset> sein:

<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, Standard, Optionsfeld“ an – die legend wird also jeder einzelnen Option vorangestellt. Jedes Radio behält trotzdem sein eigenes Label; das eine ersetzt das andere nicht.

Auch sinnvoll: Checkbox-Gruppen und 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 längerer Formulare lassen sich so gliedern – etwa „Rechnungsadresse“ und „Lieferadresse“ als zwei fieldset. Das gibt dem Formular eine Struktur, die nicht nur optisch, sondern auch programmatisch existiert.

Wann ich darauf verzichte

fieldset ist kein Allheilmittel, und es einfach um jedes Formular zu legen, finde ich eher schädlich. Eine Gruppe ohne erkennbares gemeinsames Thema bläht die Screenreader-Ausgabe nur auf, weil die legend dann bei jedem Feld unnötig wiederholt wird.

Meine Faustregel: 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.

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 waren jahrelang ein kleines Ärgernis im CSS. Heute ist das entschärft – ich setze Rahmen und Innenabstand einfach zurück und gestalte frei:

fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}
legend {
  padding: 0;
  font-weight: 600;
}

Wichtig: Das ist eine rein visuelle Entscheidung. Die semantische Verbindung zwischen Gruppe und Beschriftung bleibt erhalten, egal wie der Rahmen aussieht. Genau deshalb ist die fehlende 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: fieldset und legend liefern dasselbe ohne ein einziges ARIA-Attribut und ohne die bekannten Tücken. Das ist die erste Regel von ARIA in Reinform – das native Element kann es schon.

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

Häufige Fehler

• legend nicht an erster Stelle. Sie muss das erste Kind des <fieldset> sein, sonst geht die Zuordnung verloren.
• Radio-Gruppe ohne fieldset. Dann fehlt der Kontext – einzelne Labels allein beantworten die eigentliche Frage nicht.
• fieldset um alles legen. Verschachtelte oder thematisch leere Gruppen machen die Ausgabe für Screenreader nur länger.
• Gleicher name vergessen. Radio-Buttons gehören nur dann zu einer Auswahl, wenn sie denselben name teilen – unabhängig vom fieldset.

Häufige Fragen

Brauche ich fieldset auch für einzelne Checkboxen?

Nein. Eine einzelne Checkbox (etwa „AGB akzeptieren“) trägt ihre Aussage komplett im eigenen Label. fieldset lohnt sich erst, sobald mehrere Optionen eine gemeinsame Frage beantworten.

Kann eine Gruppe als Pflichtangabe markiert werden?

Ja. Das gehört in die legend – etwa „Versandart (Pflichtangabe)“ – und nicht an ein einzelnes Radio. Mehr dazu unter Validierung & Pflichtfelder.

Wird die legend wirklich bei jedem Feld vorgelesen?

In den meisten Screenreadern ja – das ist gewollt. Genau deshalb sollte sie kurz sein und nur dort stehen, wo die Wiederholung hilft, statt zu nerven.

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, ganz ohne ARIA, und überstehen jedes Re-Design. Sparsam eingesetzt, machen sie aus einer Ansammlung von Feldern ein verständliches Formular.