Barrierefreies Dropdown, Auswahlfeld und Combobox

Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.

„Dropdown“ bedeutet vieles: ein natives select, ein eigenes Widget nur zur Auswahl, ein Suchfeld mit Vorschlägen, ein Navigationsmenü. Diese Seite behandelt Formular-Dropdowns – das native select und die Combobox des APG. Navigations-Dropdowns sind ein anderes Muster: siehe Navigationsmenü. Diese Seite gehört zur Reihe barrierefreie UI-Muster.

Wann welches Element

Natives <select> zur Auswahl eines Wertes aus einer festen Liste: Land, Größe, Menge, Sortierung. Name, Rolle, Wert und Tastaturunterstützung sind eingebaut. Das APG selbst merkt an: „Ein HTML-select-Element mit size="1" wird assistiven Technologien als Combobox dargestellt.“
Ein schlichtes beschriftetes Textfeld, wenn freier Text genügt und Vorschläge nicht wesentlich sind.
Eine ARIA-Combobox nur, wenn Sie brauchen, was ein select nicht kann: Suchvorschläge, Filtern einer langen Liste beim Tippen, aufwendige Optionen. Sie ist eines der am schwersten richtig umzusetzenden APG-Muster.

Relevante WCAG-Kriterien

4.1.2 Name, Rolle, Wert (A): Name, Rolle, aufgeklappter Zustand und aktueller Wert werden bereitgestellt.
3.3.2 Beschriftungen oder Anweisungen (A): ein sichtbares Label, nicht nur ein Platzhalter.
2.1.1 Tastatur (A) und 2.1.2 Keine Tastaturfalle (A).
3.2.2 Bei Eingabe (A): Das Ändern des Wertes darf den Kontext (neue Seite, neues Fenster) nicht ändern, es sei denn, Nutzer wurden vorher informiert. Der W3C-Fehler F37 betrifft neue Fenster, die bei Änderung eines select geöffnet werden.
1.3.5 Bestimmung des Eingabezwecks (AA): autocomplete bei Feldern, die persönliche Daten erfassen, etwa Land.
4.1.3 Statusmeldungen (AA): „5 Vorschläge verfügbar“ oder „Keine Ergebnisse“, angesagt ohne den Fokus zu bewegen.
1.4.13 Inhalt bei Hover oder Fokus (AA), wenn das Popup bei Fokus erscheint.

Codebeispiel

<!-- 1. Native select: usually all you need -->
<label for="country">Land</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Land wählen</option>
  <option value="PL">Polen</option>
  <option value="DE">Deutschland</option>
</select>

<!-- 2. Editable combobox with a listbox popup (APG pattern) -->
<label for="search">Produkte suchen</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Vorschläge" hidden>
  <li id="opt-1" role="option">Laufschuhe</li>
  <li id="opt-2" role="option">Laufsocken</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

Was das Skript nach dem APG tun muss:

Beim Öffnen des Popups: Liste anzeigen, aria-expanded="true" und aria-controls="search-list" setzen (das APG sagt, aria-controls müsse nur gesetzt sein, solange das Popup sichtbar ist).
Wird eine Option mit den Pfeiltasten hervorgehoben: Der DOM-Fokus bleibt im Eingabefeld, und aria-activedescendant="opt-1" zeigt auf die Option; markieren Sie sie mit aria-selected="true" und einer sichtbaren Hervorhebung.
Beim Schließen: Liste verbergen, aria-expanded="false", aria-activedescendant entfernen.
Aktualisieren Sie nach dem Tippen die Statusregion mit der Anzahl der Vorschläge.
aria-autocomplete ist none, list oder both, passend zu dem, was Ihr Widget tut. Das APG führt vier Autovervollständigungs-Verhalten auf: keines, Liste mit manueller Auswahl, Liste mit automatischer Auswahl und Liste mit Inline-Vervollständigung.

Tastaturbedienung

Aus dem APG-Muster für Comboboxen:

Taste	Fokus auf der Combobox	Fokus im Listbox-Popup
Pfeil nach unten	Wechselt ins Popup, falls vorhanden	Nächste Option
Pfeil nach oben	Optional: letzte Option im Popup	Vorherige Option
Alt + Pfeil nach unten	Optional: öffnet das Popup, ohne den Fokus zu bewegen	—
Enter	Übernimmt den ausgewählten Vorschlag (bearbeitbare Combobox)	Übernimmt die Option, schließt das Popup, schreibt den Wert ins Eingabefeld
Escape	Schließt das Popup; leert optional das Eingabefeld, wenn es schon geschlossen ist	Schließt das Popup, setzt den Fokus zurück auf die Combobox
Tippen	Filtert Vorschläge	—

Typische Fehler in Online-Shops

Eigenes „Select“ für Größe oder Menge, gebaut aus div-Elementen, nur per Mausklick zu öffnen.
Platzhalter statt Label („Suchen …“), der beim Tippen verschwindet.
Suchvorschläge, die nie angesagt werden: keine Statusmeldung, kein aria-expanded, kein aria-activedescendant.
Pfeiltasten scrollen die Seite, statt durch die Vorschläge zu gehen, oder Tab ist in der Vorschlagsliste gefangen.
Sortierungs- oder Sprach-Selects, die bei Änderung die Seite neu laden, sodass Tastaturnutzer beim Durchsehen der Optionen auf eine neue Seite springen.
role="combobox" an einem umgebenden div statt am Eingabefeld, das den Fokus erhält.
Das Popup schließt sich, wenn die Maus darauf fährt, oder überdeckt das nächste Feld, ohne dass man es schließen kann.

Was automatische Prüfungen finden und was manuell zu testen ist

Automatisch (axe-core-Regel)	Was sie findet
`select-name`	Ein `select` ohne Label
`label`, `aria-input-field-name`	Ein Texteingabefeld oder `role="combobox"` / `listbox` ohne Namen
`aria-required-attr`	Eine Combobox ohne erforderliches Attribut wie `aria-expanded`
`aria-valid-attr-value`	`aria-controls` oder `aria-activedescendant` mit Verweis auf eine fehlende ID, ungültige Werte
`aria-required-children`, `aria-required-parent`	Eine `listbox` ohne `option`-Kinder, eine `option` außerhalb einer Listbox
`autocomplete-valid`	Ungültige `autocomplete`-Werte bei Feldern mit persönlichen Daten

Alle sind Karten in unserer Regelbibliothek. Die Prüfung sieht die Seite so, wie sie lädt; eine geöffnete Vorschlagsliste wird also nicht getestet. Die Browser-Erweiterung prüft die Seite in dem Zustand, in dem Sie sie hinterlassen, tippen Sie also zuerst in die Suche. Manuelle Tests: Nutzen Sie nur die Tastatur (Tippen, Pfeiltasten, Enter, Escape, Tab) und prüfen Sie mit einem Screenreader, dass die Anzahl der Vorschläge und die hervorgehobene Option angesagt werden.

Starten Sie die kostenlose Prüfung einer Seite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Ist ein natives select-Element barrierefrei?

Ja, mit einem Label. Browser und assistive Technologien unterstützen es gut; das APG merkt an, dass ein select mit size="1" assistiven Technologien als Combobox dargestellt wird. Für Land, Größe oder Sortierung ist es die sicherste Wahl.

Was ist eine Combobox?

Im APG ein Eingabe-Widget mit zugehörigem Popup, über das der Nutzer einen Wert aus einer Sammlung auswählen kann. Es kann nur auswählend oder bearbeitbar sein, zum Beispiel ein Suchfeld mit Vorschlägen.

Welche ARIA-Attribute braucht eine Combobox?

role="combobox" am Eingabefeld, aria-expanded true oder false, aria-controls mit Verweis auf das Popup, solange es sichtbar ist, aria-activedescendant für die hervorgehobene Option und ein zum Verhalten passendes aria-autocomplete. Das Popup ist meist eine Listbox mit Optionen.

Darf ein select beim Ändern des Wertes zu einer anderen Seite navigieren?

Nur, wenn Nutzer vorher darauf hingewiesen werden. 3.2.2 Bei Eingabe erlaubt keinen Kontextwechsel bei einer Änderung ohne vorherigen Hinweis. Ein eigener Button „Los“ oder „Anwenden“ ist die einfache Lösung.

Kann eine automatische Prüfung eine Combobox testen?

Sie findet ein select oder eine Combobox ohne Label, fehlende erforderliche ARIA-Attribute und Verweise auf fehlende IDs. Pfeiltasten kann sie nicht testen, auch nicht, ob Vorschläge angesagt werden oder Escape funktioniert.

Quellen

W3C WAI, APG Combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
W3C WAI, APG Developing a Keyboard Interface (aria-activedescendant): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
W3C, Understanding 4.1.3 Status Messages: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html