Mit dem label-Tag in HTML ver­bes­sern Sie die Usability Ihrer Website und schaffen einen bar­rie­re­frei­en Zugang. label kann u. a. für Ein­ga­be­fel­der, Check­bo­xen und Ra­dio­but­tons verwendet werden und funk­tio­niert mit globalen At­tri­bu­ten, Event-At­tri­bu­ten sowie mit for und form.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Wofür wird das HTML-Tag label verwendet?

Für Über­sicht­lich­keit und Bar­rie­re­frei­heit auf einer Website ist das HTML-Tag label besonders wichtig. Es kommt in For­mu­la­ren zum Einsatz und fügt Elementen wie Ein­ga­be­fel­dern, Ra­dio­but­tons oder Check­bo­xen eine er­läu­tern­de Be­schrif­tung hinzu.

Dies ist ins­be­son­de­re für zwei An­wen­dungs­fäl­le sehr wichtig:

  • Zum einen er­leich­tert es Be­su­che­rin­nen und Besuchern, die Probleme mit kleinen Flächen haben, die Na­vi­ga­ti­on auf einer Website. Weil sich der klickbare Bereich ver­grö­ßert, wird auch das Anklicken ver­ein­facht.
  • Für Nut­ze­rin­nen und Nutzer, die einen Screen­rea­der verwenden, sorgt das HTML-label-Tag zum anderen dafür, dass die Be­schrif­tung vor­ge­le­sen werden kann. Das ver­bes­sert die Usability für alle Be­su­che­rin­nen und Besucher Ihrer Website.

WCAG-Relevanz des label-Tags

HTML-Formulare sollen nicht nur optisch ver­ständ­lich sein, sondern auch den aktuellen Standards zur digitalen Bar­rie­re­frei­heit ent­spre­chen. Die WCAG (Web Content Ac­ces­si­bi­li­ty Gui­de­lines) 2.2 verlangen z. B., dass alle Ein­ga­be­fel­der be­schrif­tet werden oder klare An­wei­sun­gen erhalten (Er­folgs­kri­te­ri­um 3.3.2 „Labels or In­s­truc­tions“). Das sorgt dafür, dass Menschen mit ko­gni­ti­ven oder visuellen Be­ein­träch­ti­gun­gen verstehen, welche Eingabe erwartet wird.

Außerdem stellt das WCAG-Er­folgs­kri­te­ri­um 2.5.3 „Label in Name“ sicher, dass die sichtbare Be­schrif­tung auch im Pro­gramm­code als zu­gäng­li­cher Name enthalten ist. Das ist wichtig für Nut­ze­rin­nen und Nutzer, die assistive Tech­no­lo­gien oder Sprach­steue­rung verwenden.

Hinweis

Seit dem 28. Juni 2025 gilt in Deutsch­land das Bar­rie­re­frei­heits­stär­kungs­ge­setz (BFSG). Danach müssen viele digitale Angebote (inkl. der Formulare) bar­rie­re­frei gestaltet werden, damit sie für Menschen mit Be­ein­träch­ti­gun­gen zu­gäng­lich und nutzbar sind. Das Gesetz setzt eine EU-Richt­li­nie um und stärkt die Pflicht zur digitalen Bar­rie­re­frei­heit über bisherige Re­ge­lun­gen hinaus.

Wie wird das label-Tag in HTML ein­ge­setzt?

Es gibt zwei Mög­lich­kei­ten, das label-Tag in HTML ein­zu­set­zen. Beide Varianten sorgen dafür, dass assistive Tech­no­lo­gien wie Screen­rea­der die Be­schrif­tung korrekt erkennen und dass Nut­ze­rin­nen und Nutzer per Klick auf die Be­schrif­tung direkt zum zu­ge­hö­ri­gen Ein­ga­be­feld gelangen können.

Explizite Ver­knüp­fung (mit for und id)

Bei der ex­pli­zi­ten Methode trennen Sie die Be­schrif­tung und das For­mu­lar­feld im HTML, ver­knüp­fen diese aber mithilfe des for-Attributs mit dem id-Wert des Ein­ga­be­fel­des. Diese Variante bietet die beste Un­ter­stüt­zung durch Browser und un­ter­stüt­zen­de Tech­no­lo­gien. 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 Ein­ga­be­fel­des über­ein­stimmt.

Implizite Ver­knüp­fung (Input im label)

Al­ter­na­tiv können Sie das Ein­ga­be­feld innerhalb des <label>-Elements plat­zie­ren. In diesem Fall entsteht die Ver­knüp­fung au­to­ma­tisch, ohne dass for und id gesetzt werden müssen. Bei dieser Variante handelt es sich ebenfalls um korrektes HTML, al­ler­dings wird sie nicht von allen Geräten un­ter­stü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 aus­ge­zeich­net?

Um z. B. Nut­ze­rin­nen und Nutzern mit Screen­rea­dern den bar­rie­re­frei­en Zugang zu Ihrer Seite zu er­mög­li­chen, sollten vor allem folgende Elemente in HTML mit einem label-Tag aus­ge­zeich­net werden:

  • Ein­ga­be­fel­der: <input type="text" />, <input type="password" />, <textarea>
  • Check­bo­xen: <input type="checkbox" />
  • Ra­dio­but­tons: <input type="radio" />
  • Aus­wahl­lis­ten: <select>
  • Felder für Uploads: <input type="file" />

Welche Attribute un­ter­stützt das label-Tag?

Das HTML-Tag label un­ter­stü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 Be­schrif­tung verbunden werden soll. Der Wert von for muss genau dem Wert des id-Attributs eines anderen Form Controls im selben Dokument ent­spre­chen.
  • form: Das form-Attribut ist ein spe­zia­li­sier­tes Zu­satz­at­tri­but, das in komplexen Layouts helfen kann. Für die üblichen bar­rie­re­frei­en Formulare mit label und zu­ge­hö­ri­ger Eingabe ist es nicht er­for­der­lich. Die Ver­knüp­fung sollte über for / id oder Ver­schach­te­lung erfolgen. Offiziell gehört form al­ler­dings nicht zu den stan­dard­mä­ßig für label de­fi­nier­ten At­tri­bu­ten der HTML-Spe­zi­fi­ka­ti­on.
<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ü