aria-autocomplete
So klingt Ihr Vorschlagsfeld
Name, Wert, Zustand: drei Angaben, die eine Combobox braucht.
Vier Werte, vier Verhaltensweisen
Schreiben Sie hin, was beim Tippen wirklich passiert.
aria-autocomplete steuert nichts. Es beschreibt die sichtbare Vorhersage.
noneBeim Tippen erscheint keine Vorhersage. Der Standardwert kann weggelassen werden.
inlineEine Ergänzung steht nach der Eingabemarke im Feld. Der vorgeschlagene Teil ist ausgewählt und lässt sich überschreiben.
list- OptionBerlin
- OptionBern
- OptionBergen
Eine gefilterte Liste erscheint. Die Grafik zeigt die Variante mit manueller Auswahl; list erlaubt auch eine automatisch gewählte erste Option.
both- aktivBerlin
- OptionBern
- OptionBergen
Liste und markierte Ergänzung erscheinen zusammen. Die automatisch gewählte Option und der Text im Feld müssen übereinstimmen.
Die Verbindung hinter „list“
Der Fokus bleibt im Feld. Die aktive Option wandert.
Pfeiltasten verschieben den logischen Fokus über aria-activedescendant. Der DOM-Fokus bleibt an der Schreibmarke.
role="combobox"aria-expanded="true"aria-controls="ziel-liste"aria-activedescendant="ziel-1"id="ziel-liste"role="listbox"- 1Ein Tab-Stopp
Die Optionen liegen nicht in der Tab-Reihenfolge.
- 2Ein sichtbarer Zustand
aria-expandedfolgt dem geöffneten Popup. - 3Eine aktive ID
Der Rahmen und
aria-activedescendantzeigen dieselbe Option.
Tastaturspur
Vier Tasten, ein stabiler Schreibort
- ↓Liste betretenErste Option aktivieren
- ↑ ↓Option wechselnFeld behält den Fokus
- EnterÜbernehmenWert ins Feld schreiben
- EscSchließenEingabe nicht verwerfen
So prüfen Sie es
- Tippen Sie
Ber. Vergleichen Sie die sichtbare Ergänzung mit dem gesetzten Wertnone,inline,listoderboth. - Drücken Sie Pfeil nach unten. Der Fokusrahmen bleibt am Feld; die sichtbare Option und
aria-activedescendantwechseln gemeinsam. - Drücken Sie Escape. Das Popup schließt,
aria-expandedwirdfalse, der getippte Text bleibt erhalten.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Combobox hat keinen Namen Regel aria-input-field-name
Über dem Feld steht kein label. Ein label mit for gibt der Combobox ihren Namen.
Kritisch aria-autocomplete="on" ist kein Wert Regel aria-valid-attr-value
„on“ gehört zum HTML-Attribut autocomplete. ARIA kennt none, inline, list und both.
Kritisch aria-expanded fehlt Regel aria-required-attr
Eine Combobox muss sagen, ob die Liste offen ist. aria-expanded ist Pflicht.
Zum Mitnehmen
Das Vorschlagsfeld, korrigiert
Ein label, ein gültiger Wert, ein Zustand.
Korrektur in 2 Schritten ansehen
Das Feld benennen und den Wert setzen
Das label liefert den Namen. aria-autocomplete="list" sagt, dass Vorschläge in einer Liste erscheinen.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="text" role="combobox" aria-autocomplete="on">Nachher
<label for="ziel">Reiseziel</label> <input id="ziel" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="ziel-liste">Markierte Zeilen wurden geändert
So prüfen Sie es Tab ins Feld. Ein Vorleseprogramm sagt „Reiseziel, Kombinationsfeld, reduziert“.
Den Zustand beim Tippen wechseln
Sobald Vorschläge erscheinen, wird aria-expanded true. Ohne Vorschläge wieder false.
KorrekturvergleichSchritt 2 · JavaScript Vorher
input.addEventListener('input', () => { liste.hidden = treffer.length === 0; });Nachher
input.addEventListener('input', () => { const offen = treffer.length > 0; liste.hidden = !offen; input.setAttribute('aria-expanded', String(offen)); });Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie „Ha“. Ein Vorleseprogramm sagt „erweitert“ und nennt die Zahl der Vorschläge.