Mit dem label-Tag in HTML verbessern Sie die Usability Ihrer Website und schaffen einen barrierefreien Zugang. label kann u. a. für Eingabefelder, Checkboxen und Radiobuttons verwendet werden und funktioniert mit globalen Attributen, Event-Attributen sowie mit for und form.

Webhosting
Das beste Webhosting zum Spitzenpreis
  • 3x schneller und 60 % günstiger
  • Maximale Verfügbarkeit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Speicherplatz inklusive

Wofür wird das HTML-Tag label verwendet?

Für Übersichtlichkeit und Barrierefreiheit auf einer Website ist das HTML-Tag label besonders wichtig. Es kommt in Formularen zum Einsatz und fügt Elementen wie Eingabefeldern, Radiobuttons oder Checkboxen eine erläuternde Beschriftung hinzu.

Dies ist insbesondere für zwei Anwendungsfälle sehr wichtig:

  • Zum einen erleichtert es Besucherinnen und Besuchern, die Probleme mit kleinen Flächen haben, die Navigation auf einer Website. Weil sich der klickbare Bereich vergrößert, wird auch das Anklicken vereinfacht.
  • Für Nutzerinnen und Nutzer, die einen Screenreader verwenden, sorgt das HTML-label-Tag zum anderen dafür, dass die Beschriftung vorgelesen werden kann. Das verbessert die Usability für alle Besucherinnen und Besucher Ihrer Website.

WCAG-Relevanz des label-Tags

HTML-Formulare sollen nicht nur optisch verständlich sein, sondern auch den aktuellen Standards zur digitalen Barrierefreiheit entsprechen. Die WCAG (Web Content Accessibility Guidelines) 2.2 verlangen z. B., dass alle Eingabefelder beschriftet werden oder klare Anweisungen erhalten (Erfolgskriterium 3.3.2 „Labels or Instructions“). Das sorgt dafür, dass Menschen mit kognitiven oder visuellen Beeinträchtigungen verstehen, welche Eingabe erwartet wird.

Außerdem stellt das WCAG-Erfolgskriterium 2.5.3 „Label in Name“ sicher, dass die sichtbare Beschriftung auch im Programmcode als zugänglicher Name enthalten ist. Das ist wichtig für Nutzerinnen und Nutzer, die assistive Technologien oder Sprachsteuerung verwenden.

Hinweis

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Danach müssen viele digitale Angebote (inkl. der Formulare) barrierefrei gestaltet werden, damit sie für Menschen mit Beeinträchtigungen zugänglich und nutzbar sind. Das Gesetz setzt eine EU-Richtlinie um und stärkt die Pflicht zur digitalen Barrierefreiheit über bisherige Regelungen hinaus.

Wie wird das label-Tag in HTML eingesetzt?

Es gibt zwei Möglichkeiten, das label-Tag in HTML einzusetzen. Beide Varianten sorgen dafür, dass assistive Technologien wie Screenreader die Beschriftung korrekt erkennen und dass Nutzerinnen und Nutzer per Klick auf die Beschriftung direkt zum zugehörigen Eingabefeld gelangen können.

Explizite Verknüpfung (mit for und id)

Bei der expliziten Methode trennen Sie die Beschriftung und das Formularfeld im HTML, verknüpfen diese aber mithilfe des for-Attributs mit dem id-Wert des Eingabefeldes. Diese Variante bietet die beste Unterstützung durch Browser und unterstützende Technologien. Aus diesem Grund ist sie allgemein als Best Practice empfohlen.

<p>
    <input type="checkbox" name="gelesen" id="read" value="ja" />
    <label for="read">Ich habe die Bedingungen gelesen</label>
</p>
html

Wichtig ist, dass der Wert des for-Attributs genau mit dem id-Attribut des Eingabefeldes übereinstimmt.

Implizite Verknüpfung (Input im label)

Alternativ können Sie das Eingabefeld innerhalb des <label>-Elements platzieren. In diesem Fall entsteht die Verknüpfung automatisch, ohne dass for und id gesetzt werden müssen. Bei dieser Variante handelt es sich ebenfalls um korrektes HTML, allerdings wird sie nicht von allen Geräten unterstützt.

<p>
    <label>
        <input type="checkbox" name="gelesen" value="ja" />
        Ich habe die Bedingungen gelesen
    </label>
</p>
html
Bild: ION_DE_TVC_25-Q3_SMB_BAN_MyWebsite_960x320_DG_V2_PNG.Jpg
Bild: ION_DE_TVC_25-Q3_SMB_BAN_MyWebsite_1200x1200_DG_V2_PNG.png

Welche Elemente werden mit dem HTML-Tag für label ausgezeichnet?

Um z. B. Nutzerinnen und Nutzern mit Screenreadern den barrierefreien Zugang zu Ihrer Seite zu ermöglichen, sollten vor allem folgende Elemente in HTML mit einem label-Tag ausgezeichnet werden:

  • Eingabefelder: <input type="text" />, <input type="password" />, <textarea>
  • Checkboxen: <input type="checkbox" />
  • Radiobuttons: <input type="radio" />
  • Auswahllisten: <select>
  • Felder für Uploads: <input type="file" />

Welche Attribute unterstützt das label-Tag?

Das HTML-Tag label unterstützt alle globalen HTML-Attribute sowie alle Event-Attribute. Dazu können folgende Attribute mit dem HTML-Tag verbunden werden:

  • for: Über das Attribut for wird die ID des Input-Elements angegeben, mit dem die Beschriftung verbunden werden soll. Der Wert von for muss genau dem Wert des id-Attributs eines anderen Form Controls im selben Dokument entsprechen.
  • form: Das form-Attribut ist ein spezialisiertes Zusatzattribut, das in komplexen Layouts helfen kann. Für die üblichen barrierefreien Formulare mit label und zugehöriger Eingabe ist es nicht erforderlich. Die Verknüpfung sollte über for / id oder Verschachtelung erfolgen. Offiziell gehört form allerdings nicht zu den standardmäßig für label definierten Attributen der HTML-Spezifikation.
<form id="teilnehmer">
    <label for="vorname">Vorname</label>
    <input name="vorname" id="vorname" maxlength="25">
    <label for="nachname">Nachname</label>
    <input name="nachname" id="nachname" maxlength="30">
    <button>Angaben bestätigen</button>
</form>
html
Zum Hauptmenü