Das label-Element: Das unterschätzteste Element im Formular
Ein <label> beschriftet ein Formularfeld und verbindet beide technisch miteinander. Das klingt nach Formsache, hat aber handfeste Folgen: Ein Klick aufs Label fokussiert das Feld (bei Checkboxen: kreuzt sie an, die Klickfläche wächst enorm), und Screenreader lesen beim Fokussieren des Felds die Beschriftung vor. Ohne Label hört ein blinder Nutzer nur "Eingabefeld" und darf ratn.
Variante 1: Verknüpfung über for und id
HTML-Code
<label for="mail">E-Mail-Adresse:</label>
<input type="email" id="mail" name="mail">Das for im Label zeigt auf die id des Felds. Beide müssen exakt übereinstimmen, ein Tippfehler und die Verbindung ist stumm gerissen, optisch merkt man davon nichts. Diese Variante ist die flexibelste, weil Label und Feld getrennt im Layout stehen können.
Variante 2: Das Label umschließt das Feld
<label>
<input type="checkbox" name="newsletter">
Ja, ich will die Neuigkeiten
</label>Steckt das Feld direkt im Label, braucht es kein for und keine id, die Zugehörigkeit ergibt sich von selbst. Besonders beliebt bei Checkboxen und Radio-Buttons, wo Text und Kästchen sowieso zusammengehören.
Was kein Label ersetzt
- placeholder: verschwindet beim Tippen und wird von Hilfstechnik unzuverlässig behandelt. Als Zusatz-Beispiel okay, als einzige Beschriftung nicht.
- title: nur bei Mauskontakt sichtbar, auf Touchgeräten nie.
- Text daneben ohne Verknüpfung: sieht identisch aus, die technische Verbindung fehlt aber komplett. Genau die macht den Untershied.
Typische Fehler
- for und id stimmen nicht überein oder die id ist doppelt vergeben, siehe Attribute.
- Mehrere Felder in einem Label. Ein Label gehört zu genau einem Feld.
- Interaktives ins Label packen, etwa einen Link in einem Checkbox-Label ("Ich akzeptiere die <a>AGB</a>"). Der Klick auf den Link togglet dann je nach Browser die Checkbox gleich mit. Den Link besser neben das Label setzen.
Verwandt: input · select · Barrierefreiheit