Combobox im HTML
Drei Wege zur Auswahl
select, datalist, eigene Combobox: drei Bauarten, drei Namensfragen.
Auswahlfeld festlegen
Drei Wege durch dieselbe Ortsliste
Die sichtbare Form ist ähnlich. Entscheidend ist, ob nur feste Werte gelten, freie Eingabe erlaubt ist oder Sie die gesamte Vorschlagslogik selbst steuern müssen.
Anforderung hinein, passende Bauart heraus
Statische Ansichten: Die gezeigten Felder erklären Zustände und sind nicht bedienbar.
Muss der Wert aus einer festen Liste stammen? Ja.
Natives select
Browser und Betriebssystem führen Auswahl und Tastatur.
- Suche
- Typauswahl je Plattform, kein eigenes Filtern
- Freier Text
- Nein
- Aufwand
- HTML und sichtbares
label - Grenze
- Popup und Darstellung sind nur begrenzt gestaltbar.
Darf auch ein Wert außerhalb der Vorschläge stehen? Ja.
input mit datalist
„Bergtal“ dürfte trotzdem als eigener Wert stehen bleiben.
- Suche
- Browser zeigt passende Vorschläge beim Tippen.
- Freier Text
- Ja
- Aufwand
- Wenig Markup, Verhalten kommt vom Browser.
- Grenze
- Popup, Zoom und Ansage unterscheiden sich je Kombination.
Brauchen Sie eigene Filter, Gruppen oder Trefferlogik? Ja.
Eigene ARIA-Combobox
Zielortaria-activedescendant="ort-berlin" verbindet Feld und aktive Option.
- Suche
- Sie bestimmen Filter und Auswahlregel.
- Freier Text
- Je nach Ihrer Umsetzung
- Aufwand
- JavaScript, Fokus, Zustände und Tests
- Grenze
- ARIA liefert Semantik, aber keine Bedienlogik.
Beginnen Sie mit dem nativen Element, das die Anforderung erfüllt. Die eigene Combobox ist ein zusammengesetztes Widget und braucht eine vollständige Tastatur- und Zustandslogik.
Zwei Fokusspuren in der eigenen Combobox
Tab setzt den DOM-Fokus in das Eingabefeld.
role="combobox"Pfeil nach unten verschiebt den aktiven Vorschlag.
aria-activedescendant="ort-berlin"Enter übernimmt; Escape schließt ohne Übernahme.
aria-expanded="false"Der sichtbare aktive Eintrag wandert, während der DOM-Fokus im Feld bleibt. Tab führt aus dem gesamten Widget heraus, nicht durch jede einzelne Option.
Feste Werte: select
<label for="ziel">Zielort</label>
<select id="ziel" name="ziel">
<option value="">Bitte wählen</option>
<option value="berlin">Berlin</option>
<option value="bern">Bern</option>
</select>Freie Eingabe: datalist
<label for="ort">Zielort</label>
<input id="ort" name="ort" list="orte">
<datalist id="orte">
<option value="Berlin"></option>
<option value="Bern"></option>
</datalist>Eigene Combobox: Zustandsgerüst
Dieses Markup zeigt den offenen Zustand. JavaScript muss Attribute, aktiven Eintrag, Auswahl und Tastatur synchron halten.
<label id="ortEigeneLabel" for="ortEigene">Zielort</label>
<input id="ortEigene" role="combobox"
aria-autocomplete="list"
aria-expanded="true"
aria-controls="ortListe"
aria-activedescendant="ort-berlin">
<ul id="ortListe" role="listbox" aria-labelledby="ortEigeneLabel">
<li id="ort-berlin" role="option" aria-selected="true">
Berlin
</li>
<li id="ort-bern" role="option" aria-selected="false">
Bern
</li>
</ul>Primärquellen für die Auswahl
MDN dokumentiert das native select-Element und nennt beim datalist-Element Grenzen bei Zoom, Gestaltung und einzelnen Screenreader-Browser-Kombinationen. Das Combobox-Muster der WAI-ARIA Authoring Practices beschreibt Zustände, Popup-Beziehungen und Tastaturverhalten eigener Widgets.
Aus dem Prüfbericht
Drei Felder, drei Befunde
Kritisch Die Auswahlliste ohne Feldnamen Regel select-name
Der Text „Ausgangspunkt“ steht nur daneben. Ein label mit for oder aria-labelledby macht ihn zum Namen des select.
Kritisch Das Eingabefeld der eigenen Combobox Regel aria-input-field-name
Ein div mit role="textbox" hat keinen Namen. aria-label oder aria-labelledby ergänzt ihn am selben Element.
Kritisch Die Vorschlagsliste ohne Optionen Regel aria-required-children
role="listbox" kündigt Optionen an, enthält aber nur spans. Jeder Vorschlag bekommt role="option".
Zum Mitnehmen
Die Combobox, korrigiert
Erst das native Feld benennen, dann das eigene Muster.
Korrektur in 3 Schritten ansehen
Dem select seinen Namen geben
Der vorhandene Text bekommt eine id, das select verweist mit aria-labelledby darauf. Auswahl, Optionen und Gestaltung bleiben gleich.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Ausgangspunkt</span> <select id="routeFrom"> <option value="kath">Kath</option> </select>Nachher
<span id="routeFromLabel">Ausgangspunkt</span> <select id="routeFrom" aria-labelledby="routeFromLabel"> <option value="kath">Kath</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste in die Liste. Sie sagt „Ausgangspunkt, Kath“.
Freie Eingabe mit datalist bauen
Für freie Vorschläge genügt ein input mit list und einer datalist. Der Browser liefert Tastaturbedienung und Vorschlagsliste selbst.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="combobox" aria-expanded="false"> <div role="textbox" contenteditable="true"></div> </div>Nachher
<label for="ort">Ausgangspunkt</label> <input id="ort" list="orte"> <datalist id="orte"> <option value="Kath"></option> </datalist>Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie einen Buchstaben. Der Browser zeigt die passenden Vorschläge.
Eigene Vorschläge als option auszeichnen
Bleibt das eigene Muster, braucht die Liste echte Optionen. role="option" und aria-selected machen jeden Vorschlag zum Eintrag der Auswahl.
KorrekturvergleichSchritt 3 · ARIA Vorher
<div role="listbox" aria-label="Vorschläge"> <span>Kath</span> </div>Nachher
<div role="listbox" aria-label="Vorschläge"> <span role="option" aria-selected="false">Kath</span> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie die Liste vorlesen. Das Programm sagt „Liste mit einem Eintrag, Kath“.