<legend>

Das <legend>-Element definiert eine Beschriftung für ein <fieldset>. Es wird als Überschrift innerhalb des Fieldset-Rahmens angezeigt und gibt der Gruppe von Formularfeldern einen klaren Namen. Für Screenreader ist das <legend> besonders wichtig, weil es als Kontext für alle enthaltenen Felder vorgelesen wird.

Steckbrief <legend>

Kategorie: Formulare
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

Grundlagen

6 Punkte

<legend> muss immer das erste Kind-Element eines <fieldset> sein
Es darf nur innerhalb eines <fieldset> verwendet werden
Der Browser positioniert die Legend standardmäßig im oberen Rahmen des Fieldsets
Screenreader lesen den Legend-Text als Kontext vor jedem Feld in der Gruppe
Du kannst HTML-Inhalte wie Text, Icons oder <span> innerhalb der Legend verwenden
Das Styling von <legend> ist eingeschränkt: Manche CSS-Eigenschaften verhalten sich anders als erwartet

Syntax

index.html

Grundsyntax

<form>
  <fieldset>
    <legend>Kontaktdaten</legend>
    <label>Name: <input type="text"></label>
    <label>Telefon: <input type="tel"></label>
  </fieldset>
</form>

Beispiele

3 Beispiele

Die häufigste Verwendung: Eine Gruppe von Radio-Buttons braucht eine gemeinsame Frage oder Beschriftung, die nur mit <legend> semantisch korrekt umgesetzt werden kann:

index.html

Radio-Gruppe mit Legend

<form>
  <fieldset>
    <legend>Wie hast du uns gefunden?</legend>
    <label>
      <input type="radio" name="source" value="google">
      Google-Suche
    </label>
    <label>
      <input type="radio" name="source" value="social">
      Social Media
    </label>
    <label>
      <input type="radio" name="source" value="friend">
      Empfehlung
    </label>
    <label>
      <input type="radio" name="source" value="other">
      Sonstiges
    </label>
  </fieldset>
</form>

Auch Checkbox-Gruppen profitieren von einer Legend, die den Kontext für alle Optionen liefert:

index.html

Checkbox-Gruppe

<form>
  <fieldset>
    <legend>Newsletter-Themen auswählen</legend>
    <label>
      <input type="checkbox" name="topics" value="html">
      HTML & CSS
    </label>
    <label>
      <input type="checkbox" name="topics" value="js">
      JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="tools">
      Tools & Workflow
    </label>
  </fieldset>
</form>

In längeren Formularen helfen Legends den Nutzern, den Überblick zu behalten:

index.html

Mehrstufiges Formular

<form>
  <fieldset>
    <legend>1. Persönliche Daten</legend>
    <label>Name: <input type="text"></label>
    <label>E-Mail: <input type="email"></label>
  </fieldset>

  <fieldset>
    <legend>2. Lieferadresse</legend>
    <label>Straße: <input type="text"></label>
    <label>Stadt: <input type="text"></label>
  </fieldset>

  <fieldset>
    <legend>3. Zahlungsart</legend>
    <label>
      <input type="radio" name="pay" value="paypal">
      PayPal
    </label>
    <label>
      <input type="radio" name="pay" value="card">
      Kreditkarte
    </label>
  </fieldset>
</form>

Barrierefreiheit

Das <legend>-Element ist eines der wichtigsten Elemente für barrierefreie Formulare. Wenn ein Screenreader-Nutzer ein Feld innerhalb eines Fieldsets fokussiert, wird der Legend-Text als Kontext vorgelesen. Bei einer Radio-Button-Gruppe mit der Legend “Zahlungsmethode” hört der Nutzer zum Beispiel: “Zahlungsmethode, PayPal, Radio-Button, nicht ausgewählt”. Ohne Legend fehlt dieser Kontext komplett.

Halte den Legend-Text kurz und aussagekräftig. Lange Texte in der Legend werden bei jedem Feld wiederholt vorgelesen, was schnell ermüdend wird. Die Legend sollte die Frage oder den Bereich in wenigen Worten beschreiben.

Vermeide es, interaktive Elemente wie Links oder Buttons in die Legend zu setzen. Das kann zu Problemen bei der Tastaturnavigation führen und verwirrt Screenreader-Nutzer.

Häufige Fehler

4 Fehler

01 Legend außerhalb von Fieldset

Das <legend>-Element hat nur innerhalb eines <fieldset> eine Bedeutung. Außerhalb wird es zwar gerendert, aber die semantische Funktion geht verloren. Verwende <legend> ausschließlich als erstes Kind von <fieldset>.

02 Legend nicht als erstes Kind

Wenn <legend> nicht das erste Element im <fieldset> ist, kann es zu Rendering-Problemen kommen. Manche Browser zeigen die Legend dann nicht im Rahmen an, sondern als normalen Block-Text. Stelle sicher, dass <legend> immer direkt nach dem öffnenden <fieldset>-Tag kommt.

03 Zu langer Legend-Text

Da Screenreader den Legend-Text als Kontext vor jedem Feld vorlesen, sollte er möglichst kurz sein. “Persönliche Daten” ist gut, “Bitte geben Sie hier Ihre persönlichen Daten ein, damit wir Sie kontaktieren können” ist zu lang und wird bei jedem Feld wiederholt.

04 Legend als Ersatz für Label

Legend beschriftet die Gruppe, nicht einzelne Felder. Jedes Formularfeld innerhalb des Fieldsets braucht trotzdem sein eigenes <label>. Die Legend ersetzt das Label nicht.

Browser-Kompatibilität

5 von 5

Das legend-Element wird von allen modernen Browsern unterstützt. Das CSS-Styling kann zwischen Browsern leicht variieren, besonders bei der Positionierung im Fieldset-Rahmen.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Wie alle Formularelemente wird legend in E-Mail-Clients nicht unterstützt. Fieldset und Legend werden aus dem HTML entfernt.

Apple Mail

Keine

Entfernt Formularelemente.
Gmail

Keine

Entfernt fieldset und legend komplett.
Outlook

Keine

Keine Unterstützung für Formularelemente.
Thunderbird

Keine

Formularelemente werden nicht gerendert.
Yahoo Mail

Keine

Entfernt Formularelemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da