Label und Input in HTML
Ein Feld, ein Name, eine Verbindung
Textfeld, Kontrollkästchen, Hilfetext: drei Stellen für eine Beschriftung.
Eine Verbindung, drei Wirkungen
So wird sichtbarer Text zum Namen des Feldes
for und id verbinden Beschriftung, Fokus und Hilfsmittel.
email verbindet das sichtbare Label eindeutig mit dem Eingabefeld. <label for="email">E-Mail-Adresse</label>for = id<inputid="email"type="email">Der violette Rahmen zeigt das Feld nach einem Klick auf die Beschriftung.
Die Verbindung wirkt mehrfach
Ein Label ist mehr als Text über einem Feld
Die sichtbare Beschriftung bleibt stehen, auch wenn bereits Text eingegeben ist.
Ein Klick oder Tippen auf das Label aktiviert das zugehörige Feld.
Der Browser stellt den Labeltext als zugänglichen Namen bereit.
Sichtbarer Wortlaut und zugänglicher Name ergeben dasselbe Ziel.
Vier typische Leitungsfehler
Was gleich aussieht, ist technisch nicht gleich
Die rechte Spalte zeigt jeweils, welche Information am Feld ankommt.
<span>…</span> <input>Zugänglicher Name: leer
Die Verbindung entsteht nur bei exakter Übereinstimmung.
aria-label ersetzt den NamenDer sichtbare Wortlaut fehlt dann im zugänglichen Namen.
HTML erlaubt mehrere Labels. Für Format- oder Hilfetext trennt aria-describedby Name und Beschreibung klar.
Vollständiges Muster
Textfeld, Hilfe und Kästchen richtig verbinden
- Textfeld
- Label direkt davor
- Beispiel
- Als bleibender Hilfetext
- Kästchen
- Label direkt danach
- Schlüssel
- Jede
idnur einmal
<div class="feld">
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email"
autocomplete="email"
aria-describedby="email-beispiel">
<span id="email-beispiel">
Beispiel: name@unternehmen.de
</span>
</div>
<div class="wahl">
<input id="news" name="news" type="checkbox">
<label for="news">
Hinweise zur Veranstaltung erhalten
</label>
</div>So prüfen Sie es
Vier Beweise für die Verbindung
- 01Klick
Ein Klick auf den Labeltext setzt den Fokus ins Feld.
- 02Schlüssel
forundidsind gleich; dieidist eindeutig. - 03Name
Im Accessibility-Baum entspricht der Name dem sichtbaren Label.
- 04Wert bleibt
Beim Tippen verschwindet nur ein Beispiel, nie die Beschriftung.
Aus dem Prüfbericht
Drei Befunde an der Beschriftung
Kritisch Das Textfeld hat keinen verbundenen Namen Regel label
Ein Text über dem Feld ist im HTML noch keine Beschriftung. Ein label mit for auf die id des input verbindet beide.
Kritisch Der Name weicht von der Beschriftung ab Regel label-content-name-mismatch
Ein aria-label ersetzt den sichtbaren Text des label. Der sichtbare Wortlaut gehört deshalb in den Namen des Felds.
Prüfen Ein Hinweis wird als zweites Label ausgegeben Regel form-field-multiple-labels
HTML erlaubt mehrere label. Ist der zweite Text nur ein Hinweis, trennt aria-describedby den Namen von der ergänzenden Beschreibung.
Zum Mitnehmen
Die Beschriftungen, korrigiert
for und id, ein Name, ein Hilfetext.
Korrektur in 3 Schritten ansehen
label und Feld über for verbinden
Das Attribut for trägt denselben Wert wie die id des Felds. Der Klick auf den Text setzt dann den Cursor ins Feld.
KorrekturvergleichSchritt 1 · HTML Vorher
<p>Ihr Name</p> <input type="text" name="name">Nachher
<label for="name">Ihr Name</label> <input id="name" type="text" name="name">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Ihr Name“. Springt der Cursor ins Feld, sitzt die Verbindung.
Das Kontrollkästchen beschriften
Auch ein Kästchen braucht ein label. Mit for auf seine id wird der Text zur Beschriftung und zur Klickfläche.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="news" type="checkbox" name="news"> <span>Newsletter abonnieren</span>Nachher
<input id="news" type="checkbox" name="news"> <label for="news">Newsletter abonnieren</label>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Newsletter“. Das Häkchen wechselt.
Den Zusatz als Beschreibung verbinden
Mehrere label sind in HTML erlaubt. Erklärt der zweite Text nur Einheit oder Format, gehört er als Beschreibung in aria-describedby.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="dauer">Gewünschte Mietdauer</label> <input id="dauer" type="number" min="1" max="24"> <label for="dauer">Dauer in Stunden</label>Nachher
<label for="dauer">Gewünschte Mietdauer</label> <input id="dauer" type="number" min="1" max="24" aria-describedby="dauer-hinweis"> <span id="dauer-hinweis">Dauer in Stunden</span>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie ins Feld. Ein Vorleseprogramm nennt erst den Namen, dann den Hinweis.