Comboboxen & Autocomplete

Ein Eingabefeld, das beim Tippen Vorschläge zeigt – Autocomplete, Combobox – gehört zu den nützlichsten und zugleich kniffligsten Komponenten. Knifflig, weil zwei Bedienmodelle (Texteingabe und Listenauswahl) zusammenkommen. Wie immer lohnt zuerst der Blick auf das, was die Plattform schon kann.

Der einfache Weg: <datalist>

Für viele Fälle reicht das native <datalist>: ein Eingabefeld mit Vorschlagsliste, ganz ohne JavaScript und ARIA.

<label for="stadt">Stadt</label>
<input list="staedte" id="stadt" name="stadt" />
<datalist id="staedte">
  <option value="Berlin"></option>
  <option value="Hamburg"></option>
  <option value="München"></option>
</datalist>

Es ist tastaturbedienbar und wird angekündigt. Die Gestaltung der Liste lässt sich kaum beeinflussen – wenn das genügt, ist <datalist> die robusteste Lösung.

Der ARIA-Weg: das Combobox-Pattern

Brauchst du gefilterte Treffer, eigene Gestaltung oder Gruppen, baust du das Combobox-Pattern nach. Es verbindet ein Textfeld mit einer Listbox:

<label for="frucht">Frucht</label>
<input
  id="frucht" role="combobox"
  aria-expanded="false" aria-controls="frucht-liste"
  aria-autocomplete="list" autocomplete="off"
/>
<ul id="frucht-liste" role="listbox">
  <li id="opt-1" role="option">Apfel</li>
  <li id="opt-2" role="option">Aprikose</li>
</ul>

Die Logik dahinter:

• aria-expanded spiegelt, ob die Liste offen ist.
• aria-activedescendant zeigt per ID auf die gerade hervorgehobene Option – der Fokus bleibt im Eingabefeld, die Pfeiltasten wandern durch die Liste.
• Tastatur: Pfeil ↑/↓ wählt, Enter übernimmt, Esc schließt.
• Die Trefferzahl meldest du dezent über eine Live-Region („3 Vorschläge“).

Randnotiz – ein Muster, das man nicht raten sollte. Die Combobox ist eines der komplexesten ARIA-Muster. Hier lohnt es sich, die Referenzbeispiele des ARIA Authoring Practices Guide genau nachzubauen oder eine geprüfte Komponente zu nutzen, statt das Verhalten zu erfinden. Halb korrekte Comboboxen sind oft schlechter bedienbar als ein einfaches <select>.

Und der Datepicker?

Erst die native Variante prüfen: <input type="date"> bringt einen tastaturbedienbaren, lokalisierten Kalender mit. Nur wenn echte Sonderwünsche (Zeiträume, gesperrte Tage) das verlangen, baust du einen eigenen – dann mit dem Grid-Pattern und vollständiger Tastatursteuerung. Vorher gilt: Lässt sich das Datum auch einfach eintippen? Oft ja.

Häufige Fehler

• Eigene Combobox ohne Tastatur (nur Maus/Klick auf Vorschläge).
• aria-expanded nicht gepflegt – die Ansage „auf/zu“ stimmt nicht.
• Fokus in die Liste verschoben statt mit aria-activedescendant im Feld zu bleiben.
• Keine Trefferansage – sehende sehen die Liste, andere nicht.
• Eigener Datepicker, wo <input type="date"> gereicht hätte.

Häufige Fragen

<datalist> oder eigenes Combobox-Pattern?

<datalist>, wann immer es reicht – es ist robust und kostenlos. Zum ARIA-Muster greifst du nur bei Bedarf an Filterung, Gestaltung oder Gruppierung.

Warum autocomplete="off" an der Combobox?

Damit sich der Browser-eigene Autofill nicht mit deiner Vorschlagsliste überlagert. Die Vervollständigung übernimmt hier deine Combobox.

Ist ein <select> nicht einfacher?

Oft ja. Für eine reine Auswahl aus überschaubaren Optionen ist <select> die einfachste, robusteste Wahl. Combobox lohnt erst, wenn Tippen + Filtern echten Mehrwert bringt.

Fazit

Für Vorschlagsfelder gilt die Reihenfolge: erst <datalist>, dann – bei echtem Bedarf – das ARIA-Combobox-Pattern mit aria-expanded, aria-activedescendant und Trefferansage per Live-Region. Beim Datum zuerst <input type="date">. Weil die Combobox so anspruchsvoll ist, lohnt sich hier mehr als anderswo ein geprüftes Vorbild statt Eigenbau.