Praxisleitfaden Auswahllisten beschriften
Auswahlfelder eindeutig benennen
Verbinden Sie sichtbare Feldtexte mit der Auswahl und prüfen Sie das Ergebnis.
select-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-select-name.html
Befund verstehen
„Kath“ ist der Wert. Wie heißt das Feld?
Im Oasenatlas steht „Ausgangspunkt“ über der Ortsauswahl. Im HTML ist dieser Text jedoch nur ein benachbartes span-Element. Ohne programmatische Verknüpfung kann der Browser ihn nicht als Namen des Auswahlfeldes bereitstellen.
Warum das relevant ist
Wer mit einem Screenreader zwischen den Feldern wechselt, benötigt neben dem ausgewählten Ort auch dessen Aufgabe. Bei zwei Ortslisten fehlt sonst die eindeutige Unterscheidung zwischen Ausgangspunkt und Ziel.
Scanner-Signal
select-name: Das Auswahlfeld #routeFrom hat keinen zugänglichen Namen.
- Regel
select-name- Referenz
- WCAG 4.1.2
Diagnose vor der Korrektur
Element: #routeFrom
Sichtbarer Feldtext: Ausgangspunkt
Ausgewählter Wert: Kath
Zugänglicher Name: fehlt
select-name: VerstoßAuswahllisten nach ihrer Aufgabe benennen
Gleiche Optionen können zu unterschiedlichen Feldern gehören. Prüfen Sie die jeweilige Beschriftung und ihre technische Verbindung.
- Route planen× Befund im Beispiel
- Route bearbeiten× Befund im Beispiel
- Ortsverzeichnis Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie Namen, ausgewählten Wert und eindeutige Label-Verweise auf jeder Formularseite.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Text benennt die Auswahl?
Prüfen Sie zuerst, ob eine passende sichtbare Beschriftung bereits vorhanden ist.
Die Lehrskizze zeigt die vorhandene Ortsauswahl. aria-labelledby verbindet den Text Ausgangspunkt mit dem Feld; Kath bleibt ausgewählt.
Passende Umsetzung auswählen
Fundstelle ansehen
Zwei Ortslisten im selben Zusammenhang
Der vollständige Ortsabschnitt zeigt die Städte und darunter die Atlasübung. Die Markierung umfasst deren Bedienzeile, damit beide Feldtexte lesbar bleiben; geprüft wird das linke Auswahlfeld #routeFrom.
Über „Kath“ ist „Ausgangspunkt“ zu lesen. Diese räumliche Nähe genügt für das Auge, stellt im unveränderten HTML aber noch keine Beschriftungsbeziehung her.
Verbindung ergänzen
Den vorhandenen Feldtext referenzieren
Der Text erhält die ID routeFromLabel. aria-labelledby am vorhandenen select verweist exakt darauf. So entsteht der zugängliche Name „Ausgangspunkt“, während Auswahl, Optionen und sichtbare Gestaltung gleich bleiben.
Im Formularbaukasten Aktivieren Sie die Feldbeschriftung der Auswahlliste und tragen Sie ihren Zweck ein. Prüfen Sie im ausgegebenen HTML, ob das System diese Beschriftung tatsächlich mit dem Feld verbindet.
Vorher
<span>Ausgangspunkt</span>
<select id="routeFrom">
<option value="kath">Kath</option>
<!-- weitere Orte -->
</select>Nachher
<span id="routeFromLabel">Ausgangspunkt</span>
<select id="routeFrom" aria-labelledby="routeFromLabel">
<option value="kath">Kath</option>
<!-- weitere Orte -->
</select>Markierte Zeilen wurden geändert
Im Projekt umsetzen
Die Beziehung dauerhaft erhalten
Verankern Sie die Beschriftung im Formularbaustein, der das Feld erzeugt.
- 1
Vergeben Sie für jedes Feld und jeden referenzierten Text eine eindeutige ID, auch in wiederholten Formularzeilen.
- 2
Verwenden Sie beim Aufbau eines neuen Formulars vorzugsweise label for="routeFrom" mit select id="routeFrom". So aktiviert ein Klick auf den Feldtext auch das zugehörige Feld.
- 3
Behalten Sie beim Übersetzen und dynamischen Nachladen die Referenz auf den tatsächlich angezeigten Text bei.
- 4
Prüfen Sie weitere Ortslisten getrennt. In diesem Beleg wurde ausschließlich „Ausgangspunkt“ korrigiert; „Ziel“ benötigt dieselbe Zuordnung.
Fehlversuche vermeiden
Was keinen brauchbaren Feldnamen ergibt
Nur die erste Option ändern
„Ausgangspunkt wählen“ als Option bleibt ein Auswahlwert. Beim Wechsel zu einem Ort soll der Feldname weiterhin die Aufgabe nennen.
name mit Beschriftung verwechseln
Ein name-Attribut wie name="startort" dient der Formularübermittlung. Es ersetzt keinen zugänglichen Namen.
Auf eine falsche ID verweisen
aria-labelledby="routeFromLabel" funktioniert nur mit einem vorhandenen, passenden Textziel. Tippfehler oder doppelte IDs machen die Zuordnung unzuverlässig.
Einen abweichenden Namen hinzufügen
Ein zusätzliches aria-label="Ort" kann die sichtbare Unterscheidung zwischen Start und Ziel verlieren lassen. Halten Sie sichtbare und zugängliche Benennung zusammen.
Gleiches Aussehen, jetzt mit Feldnamen
Der erneute Axe-Lauf besteht select-name am unveränderten Auswahlknoten #routeFrom. Der Browser findet ihn nun als Kombinationsfeld mit dem Namen „Ausgangspunkt“; „Kath“ bleibt ausgewählt.
Das Ergebnis gilt für select-name am linken Auswahlfeld. Es bescheinigt weder die Korrektur des Zielfeldes noch die vollständige Bedienbarkeit der Atlasübung.
Diagnose nach der Korrektur
Element: #routeFrom
Name aus aria-labelledby: Ausgangspunkt
Ausgewählter Wert: Kath
select-name: bestanden
Sichtbarer Ausschnitt: unverändertPrüfumfang verstehen
Ein vorhandener Name ist erst der Anfang
Der automatische Befund prüft die Benennung. Den verständlichen Formularablauf beurteilen Sie im Gebrauch.
Automatisch prüfbar
- Native select-Elemente ohne zugänglichen Namen erkennen.
- Die betroffene Auswahl über ihren Selektor zuordnen.
- Nach der Reparatur die Namensprüfung an derselben Auswahl wiederholen.
Im Kontext zu entscheiden
- Beurteilen, ob „Ausgangspunkt“ die Aufgabe im jeweiligen Formular eindeutig beschreibt.
- Auswahl, Fokusführung und Rückmeldungen mit Tastatur und Screenreader prüfen.
- Dynamisch hinzugefügte Felder und weitere Formularzustände im vollständigen Nutzerweg testen.