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

## Wofür wird das HTML-Tag `label` verwendet?

Für Übersichtlichkeit und [Barrierefreiheit auf einer Website](https://www.ionos.at/digitalguide/websites/web-entwicklung/barrierefreie-website/) ist das [HTML-Tag](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/) `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](https://www.ionos.at/digitalguide/websites/webdesign/web-usability-so-optimieren-sie-ihre-navigationsstruktur/). Weil sich der **klickbare Bereich vergrößert**, wird auch das Anklicken vereinfacht.
- Für Nutzerinnen und Nutzer, die einen [Screenreader](https://www.ionos.at/digitalguide/websites/web-entwicklung/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](https://www.ionos.at/digitalguide/websites/web-entwicklung/digitale-barrierefreiheit/) entsprechen. Die [WCAG](https://www.ionos.at/digitalguide/websites/web-entwicklung/wcag-richtlinien-fuer-die-barrierefreiheit-im-web/) (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)](https://www.ionos.at/digitalguide/websites/web-entwicklung/barrierefreiheitsstaerkungsgesetz/). 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.

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

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.

```html
<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 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/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.

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


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-label/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-label/) for AI/LLM consumption.