Dropdown in HTML
Drei Muster, eine Entscheidung
Auswahlfeld, Ausklappmenü, Auswahlliste: jedes braucht Namen und Zustand.
Drei Dropdown-Arten
Der Inhalt unter dem Pfeil bestimmt das HTML
Wert, Links oder Vorschläge sehen ähnlich aus und verhalten sich grundverschieden.
<select>
Eine feste Liste. Der gewählte Wert wird mit dem Formular gesendet.
Zielort
Browseraufgabe: Öffnen, Fokus, Pfeile, Wert.
<button> + <ul>
Der Button zeigt oder versteckt eine gewöhnliche Liste mit Links.
aria-expanded="true"
Ihre Aufgabe:hidden, Zustand, Escape.
role="combobox"
Menschen tippen Text und wählen aus den dazu passenden Vorschlägen.
Zielort suchen
Ihre Aufgabe: Eingabe, Popup, aktive Option, Auswahl.
Nehmen Sie das erste passende native Element. Ein select bringt sein Verhalten mit. Disclosure und Combobox brauchen zunehmend mehr synchronisierte Zustände im eigenen JavaScript.
Welche Zustände müssen zusammenlaufen?
Die Linien zeigen die eine Quelle, aus der Sichtbarkeit und Ansage folgen.
select
optionDisclosure
aria-expandedhiddenPfeilrichtungAnsageCombobox
aria-activedescendantMarkierungEnter-WertDas native Auswahlfeld als Startpunkt
Das sichtbare label benennt das Feld. name benennt den Wert beim Absenden. Jede Auswahl steht in einer option. Weitere ARIA-Rollen sind nicht nötig.
<label for="ziel">Zielort</label>
<select id="ziel" name="ziel">
<option value="">Bitte wählen</option>
<option value="kath">Kath</option>
<option value="wien">Wien</option>
<option value="linz">Linz</option>
</select>So prüfen Sie es
selectDas sichtbare Label wird als Name angesagt; Pfeile ändern den Wert.
DisclosureEnter öffnet, Tab erreicht die Links, Escape schließt und setzt den Fokus zurück.
ComboboxTippen filtert; Pfeile bewegen den aktiven Vorschlag; Enter übernimmt ihn.
320 PixelFeld, Liste und Beschriftungen bleiben ohne Seitenscrollen lesbar.
Aus dem Prüfbericht
Drei Muster, drei Befunde
Kritisch Das Auswahlfeld ohne Namen Regel select-name
Der Text über dem select ist nur ein Nachbar. Ein label mit for macht ihn zum Namen des Auswahlfelds.
Kritisch Der Aufklappzustand am Menü-Button Regel aria-valid-attr-value
aria-expanded kennt nur true und false. Ein Wert wie „maybe“ ist ungültig und sagt nichts über das Menü.
Kritisch Eine Auswahlliste ohne Einträge Regel aria-required-children
role="listbox" kündigt Optionen an. Ohne role="option" an den Einträgen bleibt die Liste für Vorleseprogramme leer.
Zum Mitnehmen
Das Dropdown, korrigiert
Ein Name, ein gültiger Zustand, eine vollständige Liste.
Korrektur in 3 Schritten ansehen
Dem Auswahlfeld einen Namen geben
Ein label mit for verbindet den sichtbaren Text mit dem Auswahlfeld. Aussehen und Optionen bleiben unverändert.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Ausgangspunkt</span> <select id="routeFrom"> <option value="kath">Kath</option> </select>Nachher
<label for="routeFrom">Ausgangspunkt</label> <select id="routeFrom"> <option value="kath">Kath</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Ausgangspunkt“. Das Auswahlfeld bekommt den Fokus.
Den Zustand des Ausklappmenüs setzen
Erlaubt sind true und false. Beim Laden ist die Liste geschlossen, also beginnt der Zustand mit false und wechselt beim Klick.
KorrekturvergleichSchritt 2 · HTML Vorher
<button id="menu" aria-controls="liste" aria-expanded="maybe"> Bereiche </button> <ul id="liste" hidden>…</ul>Nachher
<button id="menu" aria-controls="liste" aria-expanded="false"> Bereiche </button> <ul id="liste" hidden>…</ul>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Menü mit einem Vorleseprogramm. Es nennt den Zustand „erweitert“.
Die Einträge der Liste auszeichnen
Eine angekündigte Auswahlliste braucht Optionen. Erst role="option" macht den Eintrag zum Teil der Liste, aria-selected nennt seinen Zustand.
KorrekturvergleichSchritt 3 · HTML Vorher
<div role="listbox" aria-label="Zielorte"> <span>Kath</span> </div>Nachher
<div role="listbox" aria-label="Zielorte"> <span role="option" aria-selected="false">Kath</span> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit einem Vorleseprogramm in die Liste. Sie wird als Auswahl mit einem Eintrag gemeldet.