Dropdown-Menü auf Deutsch
Ausklappmenü oder Auswahlliste
Schalter, Untermenü, Auswahlfeld: die deutschen Namen trennen drei Muster.
Begriffe sortieren
„Dropdown“ beschreibt nur die Bewegung
Erst die Aufgabe entscheidet das Bauteil: navigieren, einen Wert wählen, Vorschläge filtern oder einen Befehl ausführen.
Öffnet es Seitenlinks?
Ausklappnavigation
Ein Schalter zeigt oder verbirgt eine gewöhnliche Liste von Links. Für eine Website-Navigation brauchen Sie keine Rollen menu und menuitem.
<button aria-expanded> + <ul> + <a>Wählt es einen Formularwert?
Auswahlliste
select liefert einen Wert an ein Formular. Browser und Betriebssystem stellen das native Öffnen, Wählen und Ansagen bereit.
<label> + <select> + <option>Darf man tippen und filtern?
Combobox
Ein Eingabefeld steuert eine Vorschlagsliste. Zustand, aktive Option, Auswahl und Tastatur bilden ein eigenes zusammengesetztes Muster.
role="combobox" + role="listbox"Löst es Anwendungsbefehle aus?
Anwendungsmenü
Eine Liste von Befehlen verhält sich wie ein Desktop-Menü. Pfeiltasten bewegen den Fokus; Tab führt aus dem geöffneten Menü heraus.
aria-haspopup="menu" + role="menu"Vier Diagnosen
Woran Sie das richtige Muster erkennen
Die Tasten verraten das Bauteil
Gleiche Optik bedeutet nicht gleiche Tastatur. Die Spuren zeigen die Basiserwartung; optionale Komforttasten sind weggelassen.
Die Muster in der Originaldokumentation
So prüfen Sie es
- Klären Sie zuerst den Inhalt: Seitenlinks, Formularwerte, gefilterte Vorschläge oder Befehle. Erst dann prüfen Sie Rollen und Attribute.
- Tabben Sie durch eine Ausklappnavigation. Schalter und Links müssen normale Tabstopps sein; Enter oder Leertaste öffnet den Schalter.
- Prüfen Sie ein Formularfeld im DOM. Eine native Auswahlliste besteht aus
selectundoption; eine Combobox braucht ihr vollständiges Popup- und Fokusmuster. - Finden Sie
role="menu"in einer normalen Website-Navigation, vergleichen Sie die Tastatur. Fehlen die erwarteten Pfeiltasten, passt die Rolle nicht zum Verhalten.
Aus dem Prüfbericht
Zwei Regeln am Ausklappmenü
Kritisch Der Zustand am Menüschalter Regel aria-valid-attr-value
Beim Ausklappmenü sagt aria-expanded, ob das Untermenü offen ist. Erlaubt sind nur true und false, gesetzt beim Laden und bei jedem Klick.
Kritisch Ein Pfeil-Schalter im Menülink Regel nested-interactive
Steckt die Schaltfläche im Link, bleibt unklar, was der Tastendruck öffnet. Setzen Sie Link und Schalter nebeneinander.
Zum Mitnehmen
Das Ausklappmenü, korrigiert
Ein gültiger Zustand, zwei getrennte Bedienelemente.
Korrektur in 2 Schritten ansehen
Den Aufklappzustand richtig setzen
Ein deutsches Wort ist hier kein gültiger Wert. aria-expanded kennt true und false; geschlossen heißt false.
KorrekturvergleichSchritt 1 · HTML Vorher
<button aria-controls="untermenue" aria-expanded="vielleicht"> Leistungen </button> <ul id="untermenue" hidden>…</ul>Nachher
<button aria-controls="untermenue" aria-expanded="false"> Leistungen </button> <ul id="untermenue" hidden>…</ul>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Untermenü mit einem Vorleseprogramm. Es meldet „erweitert“.
Link und Schalter nebeneinander stellen
Der Link führt zur Übersicht, der Schalter öffnet das Untermenü. Getrennt sind beide eigene Tabstopps mit eigenem Namen.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/leistungen">Leistungen <button type="button" aria-label="Untermenü öffnen">▾</button> </a>Nachher
<a href="/leistungen">Leistungen</a> <button type="button" aria-label="Untermenü öffnen" aria-expanded="false">▾</button>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie durch das Menü. Sie halten am Link und danach am Pfeil.