SingleSelect zeigt nicht barrierefreies Browser-Autocomplete an

[deleonio]

Wenn das name-Attribute gesetzt ist, dann zeigt der Browser über dem SingleSelect über dem datalist noch das nicht barrierefreie Autocomplete-Overlay vom Browser an. Warum wird es angezeigt und wie können wir es valide abschalten, ohne die Anforderungen an das SingleSelect einzuschränken.

Wahrscheinlich gilt das Gleiche für die ComboBox.

[deleonio]

Warum das zusätzliche Overlay erscheint

1. Bedingung des Browsers für „Eigen-Autofill“
   Laut Spezifikation fängt der User-Agent erst dann an, eigene Vorschlags-Listen (Adresse, frühere Eingaben …​) anzuzeigen, wenn ein Eingabefeld …

ein name (oder id)-Attribut hat,

in einem

liegt und

das Formular submit-bar ist.

Entfernt man nur das name, ist Bedingung 1 nicht mehr erfüllt – die historisch gespeicherten Werte bleiben weg. Genau das beobachten Sie.

2. datalist vs. Browser-Autofill
   Die Vorschlagsliste aus wird zusätzlich gezeigt. Hat das Feld aber ein name, legt sich darüber die zweite Liste aus den Browser-eigenen Autofill-Einträgen – das nicht barrierefreie Overlay, das Sie sehen.

Gültige Wege, das Overlay abzustellen

Variante Wann sinnvoll Nachteile

autocomplete="off" direkt am (oder am ) Schnelle Lösung. Der Browser soll keine eigenen Vorschläge anzeigen; datalist bleibt davon unberührt – die Spezifikation erlaubt das ausdrücklich Chrome & Co. ignorieren off teilweise bei Login-Feldern oder wenn der Nutzer Autofill erzwungen hat. Für normale Textfelder funktioniert es aber zuverlässig.
Sichtbares Feld ohne name; zusätzlich ein verstecktes , das Sie per JS mit der Auswahl befüllen Wenn Sie das name nur für das Absenden brauchen. Etwas mehr JS-Aufwand.
Eindeutiges, zufälliges Token als Wert von autocomplete (z. B. section-xyz no-history) Fallback, wenn off ignoriert wird. Jedes Token, das der Browser noch nie gesehen hat, liefert keine Historie. Semantisch weniger sauber, aber valide.

Beispiel-Markup (Variante 2):

Apfel Birne Kirsche

---

Was hat aria-autocomplete="both" damit zu tun?

aria-autocomplete ist rein für Assistive Technologien.

Gültige Werte: none, inline, list, both – kein off!

both bedeutet: Der Nutzer bekommt gleichzeitig

eine Auswahlliste (list) und

eine Inline-Vervollständigung im Eingabefeld.

Das passt nur, wenn Ihr SingleSelect/ComboBox tatsächlich beides bietet (z. B. list-Popup und im Feld grau hinterlegten Resttext). Ist nur eine Liste ohne Inline-Echo vorhanden, sollte der Wert stattdessen list heißen. Am Browser-Autofill ändert aria-autocomplete aber überhaupt nichts.

---

Warum zeigt der Browser das Overlay? Weil das Feld ein name hat und damit für sein eigenes Autofill qualifiziert ist.
Wie schalten wir es valide ab? autocomplete="off" setzen oder das name nur in ein verstecktes Feld verlagern.
Gilt das auch für die ComboBox? Ja – jede Eingabe mit name verhält sich identisch.
Warum ist both gesetzt und kann man off setzen? both bezieht sich nur auf die ARIA-Logik und ist korrekt, wenn Liste und Inline-Vorschlag existieren. Ein Wert off existiert dort nicht; stattdessen ggf. none oder list verwenden.

Damit behalten Sie alle Anforderungen an den SingleSelect / die ComboBox bei und eliminieren die störende zweite Vorschlagsliste.