HTML-Tag label: Die optimale Lösung für Barrierefreiheit und mehr Usability

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 Buttons verwendet werden und funktioniert mit globalen Attributen, Event-Attributen sowie for und form.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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, Buttons oder Checkboxen eine erläuternde Beschriftung bzw. ein Etikett 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 Klicken einfacher. Für Nutzerinnen und Nutzer, die einen Screen-Reader 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 Onlinepräsenz.

Wie wird das label-Tag in HTML eingesetzt?

Es gibt zwei Möglichkeiten, das label-Tag in HTML einzusetzen. Mit dem for-Attribut können Sie label logisch direkt mit dem Eingabefeld zu verknüpfen. Alternativ bauen Sie das Formular neben der Beschriftung direkt innerhalb des HTML-label-Tags ein. Zur besseren Veranschaulichung nachfolgend beide Optionen von label in HTML.

Für Checkboxen:

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

Wichtig ist dabei, dass das for-Attribut, das im HTML-label-Tag verwendet wird, denselben Wert hat wie das id-Attribut des Eingabefeldes.

Für Buttons:

<input type="radio" id="radio" value="zustimmen" />
<label for="read">Zustimmen</label>

Bei der zweiten Option wird die Beschriftung eingeschlossen. Das sieht beispielsweise so aus:

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

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

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

  • Eingabefelder: <input type="text" />, <input type="password" />, <testarea>
  • Checkboxen: <input type="checkbox" />
  • Buttons: <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 Event-Attribute. Dazu können folgende Attribute mit dem HTML-Tag verbunden werden:

for: Über das Attribut for wird die ID des Input-Elements bestimmt, mit dem die Beschriftung verbunden werden soll. Das bedeutet auch, dass in einem Dokument das erste Input-Element, das diesem Wert entspricht, automatisch in Zusammenhang mit der Beschriftung steht.

form: Das Attribut form definiert, welches Form-Element dem label-Tag in HTML zugeordnet werden soll. In der Praxis sieht das beispielsweise so aus:

<form id="teilnehmer">
<label class="h2" form="teilnehmer">Name</label>
<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>
Tipp

Gestalten Sie Ihre Website ganz nach Ihren individuellen Wünschen! Mit dem Homepage-Baukasten von IONOS bauen Sie Ihre professionellen Onlinepräsenz ohne großes Vorwissen einfach selbst. Sie können stattdessen auch auf die Expertise unserer Entwicklerinnen und Entwickler zurückgreifen. Wählen Sie einfach die Lösung, die für Ihre Zwecke am besten passt!

War dieser Artikel hilfreich?