Rolle Widget

`combobox`

Kennzeichnet ein Texteingabefeld kombiniert mit einer Popup-Liste – für Autovervollständigung, Typeahead-Suche und benutzerdefinierte Auswahlfelder. Das native <select> genügt für einfache Einzelauswahl; role="combobox" kommt nur zum Einsatz, wenn Filterung oder Remote-Vorschläge benötigt werden.

Verwendung

<select> wird verwendet, wenn die Auswahl aus einer kurzen, festen Liste erfolgt und kein Filtern erforderlich ist. Das native Element bietet mobilfreundliche Auswahlmenüs, vollständige Tastaturunterstützung und kein JavaScript.

role="combobox" ist für Fälle vorgesehen, die mit nativen Elementen nicht erreichbar sind:

Autovervollständigung mit Filterung (Stadtsuche, Nutzererwähnung).
Vorschläge, die von einer Remote-API abgerufen werden.
Elemente mit reichhaltigem Inhalt (Avatare, Sekundärtext).
Tag-Eingaben, bei denen mehrere Werte ausgewählt werden können.

ARIA 1.2 hat das Combobox-Muster wesentlich geändert. Die Rolle wird dem <input> zugewiesen, NICHT dem Wrapper. Das Popup ist eine separate role="listbox" (oder tree/grid/dialog), die die Combobox über aria-controls besitzt.

Tastatur- und Fokus-Vertrag

Gemäß dem APG-Combobox-Muster:

Der Fokus verbleibt jederzeit auf dem Eingabefeld. Die Listbox wird über aria-expanded="true" geöffnet, und die aktive Option wird über aria-activedescendant verfolgt – der Fokus wird NICHT verschoben.
Der Pfeil nach unten öffnet das Popup und setzt die aktive Option auf das erste Element.
Pfeil nach oben/unten verschiebt die aktive Option innerhalb des Popups.
Enter wählt die aktive Option aus und schließt das Popup.
Escape schließt das Popup; beim zweiten Escape wird das Eingabefeld geleert.
Tippen filtert die Liste (wenn aria-autocomplete="list" oder "both" gesetzt ist).

aria-autocomplete ist auf "none", "inline", "list" oder "both" zu setzen, um das Vorschlagsverhalten zu beschreiben.

Häufige Fehler

role="combobox" auf dem Wrapper statt auf dem <input> platzieren (das Muster vor ARIA 1.2). Moderne Screenreader erwarten die Rolle auf dem bearbeitbaren Element.
Den DOM-Fokus bei Pfeil-nach-unten in die Listbox verschieben. Die APG schreibt aria-activedescendant vor; eine Fokusverschiebung verhindert das Tippen.
aria-expanded bei sichtbarem Popup auf "false" belassen.
Die Listbox im DOM rendern, ohne sie über aria-controls zu verknüpfen.
Die Liste filtern, aber aria-activedescendant auf ein Element zeigen lassen, das nicht mehr existiert.

Beispiel

<label for="city">Stadt</label>
<input
  id="city"
  type="text"
  role="combobox"
  aria-controls="cityList"
  aria-expanded="false"
  aria-autocomplete="list"
  aria-activedescendant=""
>
<ul id="cityList" role="listbox" hidden>
  <li id="city-1" role="option">London</li>
  <li id="city-2" role="option">Lissabon</li>
  <li id="city-3" role="option">Ljubljana</li>
</ul>