Select label in HTML
Der Feldname bleibt, die Auswahl wechselt
Label, Auswahlfeld, sichtbarer Text: drei Stellen einer Verbindung.
Verbindung im DOM
Ein Text, ein Ziel, ein verständlicher Feldname
for zeigt auf id. Daraus baut der Browser den Namen des Auswahlfeldes; die gewählte Option bleibt sein Wert.
Was Menschen sehen
Sichtbare Beschriftung · gewählter Eintrag
for="standort"id="standort"Was Software erhält
NameStandort
RolleKombinationsfeld
WertBerlin
Zustanderforderlich
Zugänglicher Name · Rolle · aktueller Wert
Unterbrochene Verbindung
for="Standort"id="standort-feld"Name fehltÄhnlich reicht nicht. Beide Werte müssen Zeichen für Zeichen übereinstimmen.
Kopierbares Grundmuster
Beschriftung und Pflichtauswahl vollständig zusammenbauen
Das label benennt die Aufgabe. name benennt dagegen den Schlüssel bei der Formularübermittlung und ersetzt keine Beschriftung.
01forverweist auf das Feld
02idist das eindeutige Ziel
03namegehört zu den gesendeten Daten
04optionliefert den aktuellen Wert
<label for="standort">Standort</label>
<select id="standort" name="standort" required>
<option value="">Bitte wählen</option>
<optgroup label="Nord">
<option value="hamburg">Hamburg</option>
</optgroup>
<optgroup label="Ost">
<option value="berlin" selected>Berlin</option>
<option value="leipzig">Leipzig</option>
</optgroup>
</select>Drei Positionen
Das Label darf umziehen. Die Verbindung bleibt.
Die Darstellung entscheidet über die CSS-Klasse. Das gleiche Paar aus for und id bleibt im HTML erhalten.
01 · über dem Feld
Für längere Formulare: Text und Feld bleiben auch bei Zoom gut zuzuordnen.
.feld { display: grid; gap: .4rem; }02 · neben dem Feld
Für kompakte Filter: Mit flex-wrap bricht die Zeile auf kleinen Flächen um.
.filter { display: flex; flex-wrap: wrap; }03 · visuell verborgen
Nur bei eindeutigem Kontext. W3C empfiehlt sichtbare Labels, wo immer möglich.
<label class="visually-hidden" …>CSS für die Varianten
Sichtbar stapeln, seitlich umbrechen, gezielt verbergen
display: none und visibility: hidden entfernen einen Labeltext auch aus unterstützenden Darstellungen. Die letzte Klasse tut das nicht.
.feld {
display: grid;
gap: 0.4rem;
}
.filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}Quellen für die Umsetzung
W3C erklärt das Verknüpfen und Verbergen von Labels. Der HTML Standard zum label-Element definiert for als Verweis auf die id eines beschriftbaren Elements. Für Sprachsteuerung erläutert W3C, warum der sichtbare Text im zugänglichen Namen vorkommen muss.
So prüfen Sie es
Verbindung, Name und Umbruch getrennt kontrollieren
- Beschriftung anklicken. Der Klick muss das zugehörige Feld erreichen; je Browser erhält es Fokus oder öffnet sich.
- Accessibility-Baum öffnen. Name und aktueller Wert müssen getrennt erscheinen.
- Auf 200 Prozent zoomen. Label und Feld bleiben vollständig und erkennbar zusammen.
- Mit Sprache prüfen. Der sichtbare Feldtext muss das Feld direkt ansprechen.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Auswahlfeld hat keinen Namen Regel select-name
Der Text über dem select ist nur ein span. Ein label mit for macht ihn zum Namen des Auswahlfeldes.
Kritisch for und id passen nicht zusammen Regel label
Ein label ist vorhanden, sein for verweist ins Leere. Beide Werte müssen genau übereinstimmen.
Kritisch Sichtbarer Text und Name gehen auseinander Regel label-content-name-mismatch
Über dem Feld steht „Standort“, im aria-label „Filiale“. Der sichtbare Text gehört in den zugänglichen Namen.
Zum Mitnehmen
Die Feldbeschriftung, korrigiert
Ein label, ein passendes for, kein zweiter Name.
Korrektur in 2 Schritten ansehen
for und id angleichen
Der Wert in for und die id des select müssen genau übereinstimmen. Groß- und Kleinschreibung zählen mit.
KorrekturvergleichSchritt 1 · HTML Vorher
<label for="Standort">Standort</label> <select id="standort-feld" name="standort"> <option value="berlin">Berlin</option> </select>Nachher
<label for="standort-feld">Standort</label> <select id="standort-feld" name="standort"> <option value="berlin">Berlin</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Standort“. Öffnet sich das Auswahlfeld, passen for und id zusammen.
Den zweiten Namen entfernen
aria-label überschreibt das sichtbare label. Weicht der Text ab, scheitert die Bedienung per Sprachbefehl an der abweichenden Ansage.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="standort-feld">Standort</label> <select id="standort-feld" name="standort" aria-label="Filiale"> <option value="berlin">Berlin</option> </select>Nachher
<label for="standort-feld">Standort</label> <select id="standort-feld" name="standort"> <option value="berlin">Berlin</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Standort“, genau wie der Text über dem Feld.