Accessible Dropdown
Gleiche Tasten, zwei Stimmen
Ein Menü aus divs schweigt. Ein select spricht. Derselbe Tastendruck.
Musterlabor
Ein Wort, vier Bedienlogiken
Entscheiden Sie nach der Aufgabe. Die Form des Pfeils hilft dabei nicht.
- Formularwert auswählenNative Auswahlliste
- Zu Seiten navigierenDisclosure-Navigation
- Beim Tippen filternCombobox
- App-Befehle ausführenMenu-Button
FORM
Ein Wert, feste Liste
Native Auswahlliste
- Browser
- Semantik, Auswahl und Bedienung
- Sie
- Label, Optionen und verständliche Werte
- Tasten
- Tab, Pfeiltasten, Zeichen
Gute Vorgabe: Beginnen Sie hier.
LINKS
Eine Gruppe von Links
Disclosure-Navigation
- Browser
- Button- und Link-Semantik
- Sie
aria-expanded, Sichtbarkeit, Fokus zurück- Tasten
- Enter, Leertaste, Escape, Tab
Wichtig: Site-Navigation bleibt eine Linkliste, kein ARIA-Menü.
TEXT
Tippen und Vorschläge
Editierbare Combobox
- Browser
- Nur die Texteingabe
- Sie
- Popup, Status, aktive Option und Filterlogik
- Tasten
- Pfeiltasten, Enter, Escape, Texteingabe
Nur passend: wenn Texteingabe oder Filterung Teil der Aufgabe ist.
AKTION
Befehle in einer Anwendung
Menu-Button
- Browser
- Nur der auslösende Button
- Sie
menu,menuitemund komplettes Fokusmodell- Tasten
- Pfeiltasten, Enter, Escape
Selten im Web: für App-Befehle, nicht für gewöhnliche Seitenlinks.
Direkt zu den Referenzmustern
Nutzen Sie die Beispiele als Prüfreferenz und testen Sie die fertige Umsetzung mit echten Hilfsmitteln.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Auswahlliste hat keinen Namen Regel select-name
„Versandart“ steht als loser Text daneben. Ein label mit for verbindet Wort und Auswahlliste.
Kritisch Der Pfeil-Button hat keinen Namen Regel button-name
Eine zusätzliche Schaltfläche neben dem Feld sagt nur „Schaltfläche“. Ein select braucht sie gar nicht.
Kritisch Die Listbox hat keine Optionen Regel aria-required-children
role="listbox" verlangt Kinder mit role="option". Reine divs zählen nicht; ein select bringt alles mit.
Zum Mitnehmen
Das Dropdown, korrigiert
Ein select mit label ersetzt vier divs und alles JavaScript.
Korrektur in 2 Schritten ansehen
Die divs durch select ersetzen
select bringt Rolle, Tastatur, Zustand und Positionsangabe mit. Das Aussehen steuert CSS.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Versandart</span> <div class="dropdown" tabindex="0">Standard</div> <div role="listbox"> <div>Standard</div> <div>Express</div> </div>Nachher
<label for="art">Versandart</label> <select id="art" name="art"> <option value="standard">Standard</option> <option value="express">Express</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Tab aufs Feld, Pfeil nach unten. Ein Vorleseprogramm sagt „Express, 2 von 2“.
Die Auswahlliste gestalten, nicht ersetzen
Rahmen, Pfeil und Abstände kommen aus CSS. Die Semantik bleibt beim select.
KorrekturvergleichSchritt 2 · CSS Vorher
.dropdown { border: 2px solid #151514; padding: 0.6rem 2.5rem 0.6rem 0.8rem; }Nachher
select { appearance: none; border: 2px solid #151514; padding: 0.6rem 2.5rem 0.6rem 0.8rem; background: url('chevron.svg') right 0.8rem center / 1rem no-repeat; }Markierte Zeilen wurden geändert
So prüfen Sie es Das Feld sieht aus wie zuvor. Öffnen Sie es per Leertaste; die Liste erscheint.