Input und Label in HTML
for und id verbinden Text und Feld
Name, id, Beschriftung: drei Stellen am selben Eingabefeld.
Verbindungsplan
Ein Text, ein Feld, dieselbe Kennung
for und id bilden die Leitung. Der Browser verbindet den sichtbaren Text mit Fokus, Klickfläche und zugänglichem Namen.
So löst der Browser die Verbindung auf
Konzeptdarstellung eines explizit beschrifteten E-Mail-Felds.
<label for="mail">
E-Mail-Adresse
</label><input id="mail"
type="email">- Zugänglicher Name
- E-Mail-Adresse
- Klick auf das Label
- setzt den Fokus ins Feld
- Berührung des Labels
- nutzt dieselbe größere Trefferfläche
Name, Hinweis und Beispiel haben drei Aufgaben
Nur die Beschriftung beantwortet dauerhaft: „Was gehört in dieses Feld?“
<label>Zugänglicher Name und sichtbare Orientierung.
aria-describedbyBeschreibung mit Zweck oder Format.
placeholderBeispielwert, keine dauerhafte Beschriftung.
Explizit und umschließend
<label for="firma">Firmenname</label>
<input id="firma" name="firma" type="text"
autocomplete="organization">
<label for="anmerkung">Anmerkung</label>
<textarea id="anmerkung" name="anmerkung"></textarea>
<label for="land">Lieferland</label>
<select id="land" name="land">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
</select>
<label>
<input type="checkbox" name="agb">
Ich habe die Bedingungen gelesen.
</label>Zusammengesetzt und verborgen
<span id="zahl-vor">Lizenzen für</span>
<input id="anzahl" name="anzahl" type="number"
aria-labelledby="zahl-vor anzahl-nach">
<span id="anzahl-nach">Mitarbeitende</span>
<label class="visually-hidden" for="q">
Suchbegriff
</label>
<input id="q" name="q" type="search"
placeholder="Suchbegriff">.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
}So prüfen Sie die Verbindung
- Auf den sichtbaren Labeltext klicken: Der Fokus muss ins zugehörige Feld springen.
- Jede
idim gesamten Dokument auf Eindeutigkeit prüfen. - Im Accessibility Tree den berechneten Namen mit dem sichtbaren Text vergleichen.
- Mit Sprachsteuerung den sichtbaren Feldnamen verwenden.
Aus dem Prüfbericht
Drei Befunde am Eingabefeld
Kritisch Der Text steht über dem Feld, gehört ihm aber nicht Regel label
Nähe allein verbindet im HTML nichts. Ein label mit for auf die id des input macht den Text zum Namen des Felds.
Prüfen Dieselbe id an zwei Feldern Regel duplicate-id-aria
Kommt eine id zweimal vor, trifft for nur das erste passende Element in Dokumentreihenfolge. Jede id im gesamten Dokument bleibt einmalig.
Kritisch Ein aria-label überschreibt die Beschriftung Regel label-content-name-mismatch
Steht am input ein anderer Name als im label, scheitert die Sprachbedienung. Der sichtbare Text gehört in den Namen.
Zum Mitnehmen
Das Formular, korrigiert
for, id und Name: drei kleine Änderungen im HTML.
Korrektur in 3 Schritten ansehen
label über for mit dem Feld verbinden
Ein label mit for zeigt auf die id des input. Der Klick auf den Text setzt dann den Cursor ins Feld.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>E-Mail-Adresse</span> <input type="email" name="mail" placeholder="E-Mail-Adresse">Nachher
<label for="mail">E-Mail-Adresse</label> <input id="mail" type="email" name="mail" placeholder="name@example.org">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „E-Mail-Adresse“. Springt der Cursor ins Feld, sitzt die Verbindung.
Doppelte id auflösen
Eine id gehört genau einem Element. Beim Umbenennen wandert jeder Verweis aus for und aria-describedby mit.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="ort">Wohnort</label> <input id="ort" name="wohnort"> <label for="ort">Lieferort</label> <input id="ort" name="lieferort">Nachher
<label for="ort">Wohnort</label> <input id="ort" name="wohnort"> <label for="lieferort">Lieferort</label> <input id="lieferort" name="lieferort">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie beide Beschriftungen an. Jede setzt den Cursor in ihr eigenes Feld.
Den Namen an die Beschriftung angleichen
Ein aria-label ersetzt den sichtbaren Text für Vorleseprogramm und Sprachsteuerung. Am einfachsten entfällt es, dann zählt das label.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="plz">Postleitzahl</label> <input id="plz" name="plz" aria-label="PLZ eingeben">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" name="plz">Markierte Zeilen wurden geändert
So prüfen Sie es Sagen Sie „Postleitzahl“ zur Sprachsteuerung. Der Cursor landet im richtigen Feld.