<legend>

Zuletzt aktualisiert am 4. Februar 2026

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.

Grundlagen

• <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

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

Beispiele

Legend für Radio-Button-Gruppe

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

<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>

Checkbox-Gruppe mit Legend

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

<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>

Mehrstufiges Formular mit Legends

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

<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

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>.

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.

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.

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

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.

Email-Kompatibilität

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

Verwandte Elemente