Synonyme: Eingabefeld mit Vorschlagsliste, Autovervollständigungssuche, Auto-Suggest Box

Siehe auch: Auswahlliste, Ausklappliste, Menüschaltfläche, Eingabefeld (einzeilig), kombiniertes Eingabefeld

Eingabefelder mit Autocomplete-Funktion ermöglichen die freie Texteingabe und die Auswahl von Optionen aus einer Liste, wobei die Liste erst nach erfolgter Texteingabe geöffnet wird.

Im geschlossenen Status besteht ein Eingabefeld mit Autocomplete-Funktion aus einem Eingabefeld. Im geöffneten Status wird zusätzlich darunter eine Auswahlliste angezeigt (ggf. mit Scrollbalken). Die Optionen der Auswahlliste können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden.

Eingabefelder mit Autocomplete-Funktion können auch automatisch den ersten Treffer in das Eingabefeld eintragen, so dass dieser unmittelbar übernommen werden kann (Inline-Autocomplete). Dabei bleibt der Textcursor jedoch an der Stelle des zuletzt eingegebenen Zeichens.

Abbildung: Eingabefeld mit Autocomplete-Funktion

Darstellung

Permalink "Darstellung"

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Nr.EigenschaftBeschreibungKlassifizierungReferenz
617KontrastDie Beschriftung der Optionen in der Auswahlliste der Autocomplete-Funktion müssen einen Kontrast von mindestens 4,5:1 aufweisen.MussEN 301 549: 9.1.4.3, 11.1.4.3
618KontrastDie gewählte Option in der Auswahlliste der Autocomplete-Funktion muss einen Kontrast von mindestens 3:1 zu benachbarten Optionen aufweisen.MussEN 301 549: 9.1.4.11, 11.1.4.11
619FokussichtbarkeitBei der Tastaturnavigation durch die Listeneinträge, muss die aktuelle Option im sichtbaren Bereich angezeigt werden.MussEN 301 549: 11.2.4.7

Bedienung

Permalink "Bedienung"

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Nr.EigenschaftBeschreibungKlassifizierungReferenz
620TastaturbedienungDie Optionen in der Auswahlliste der Autocomplete-Funktion müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung).MussEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
621AktualisierungenBei Fokussierung und Bedienung des Eingabefeldes mit Autocomplete-Funktion darf keine unerwartete Kontextänderung erfolgen.MussEN 301 549: 11.3.2.1 und 11.3.2.2
622KlickbereichDer Klickbereich der Listeneinträge der Auswahlliste sollen mindestens 24 x 24 px betragen.SollWCAG 2.2: 2.5.8 (AA)

Tastaturbedienung Eingabefeld mit Autocomplete-Funktion

Permalink "Tastaturbedienung Eingabefeld mit Autocomplete-Funktion"
AktionTasteKlassifizierung
Öffnen der AuswahllisteTexteingabeErforderlich
Schließen der AuswahllisteEINGABE
ESC
TAB
Texteingabe, die zu keinen Ergebnissen der Autocomplete-Funktion führt		Erforderlich
Bedienung der Auswahlliste (Auswahl des vorhergehenden oder folgenden Werts)PFEIL AUF, PFEIL ABErforderlich
Bedienung der Auswahlliste (Auswahl eines Werts davor oder danach mit fest definierter Schrittweite)BILD AUF, BILD AB

Hinweis: Die Schrittweite soll mit der Anzahl der sichtbaren Optionen übereinstimmen.

Empfohlen

Zeigeinstrumentbedienung Eingabefeld mit Autocomplete-Funktion

Permalink "Zeigeinstrumentbedienung Eingabefeld mit Autocomplete-Funktion"
AktionTasteKlassifizierung
Schließen der AuswahllisteLinksklick auf einen Wert innerhalb der geöffneten ListeErforderlich
Schließen der AuswahllisteLinksklick außerhalb des kombinierten Eingabefeldes (bestehend aus dem Eingabefeld und der Auswahlliste)Erforderlich
Wertauswahl innerhalb der AuswahllisteLinksklick auf einen WertErforderlich

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Nr.EigenschaftBeschreibungKlassifizierungReferenz
623RolleDie Rolle Eingabefeld muss an die Accessibility API übermittelt werden (siehe Accessibility API)

Hinweis: Sofern die verwendete Technologie die Rolle Eingabefeld mit Autocomplete-Funktion nicht kennt, muss die Rolle Eingabefeld verwendet werden. In diesem Fall soll in der Beschreibung auf die Autocomplete-Funktionalität hingewiesen werden.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
624Desktop: ElementhierarchieDie Eltern-Kind-Beziehungen der Elemente innerhalb der Liste müssen an die Accessibility API übermittelt werden.MussEN 301 549: 911.5.2.9
624StatusDer Status der Auswahlliste der Autocomplete-Funktion muss an die Accessibility API übermittelt werden (siehe Elementstatus).

Hinweis: Dies bezieht sich z. B. auf den Status „geöffnet“ oder „geschlossen“.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5, 1.5.2.9
625NameDie Gruppenbeschriftung der Listeneinträge muss (sofern vorhanden) an die Accessibility API übermittelt werden.MussEN 301 549: 9.1.3.1, 11.1.3.1
626BedienungDie Auswahlliste der Autocomplete-Funktion muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
627AktualisierungAktualisierungen hinsichtlich des Accessible Names, Werts oder Status des kombinierten Eingabefeldes müssen an die Accessibility API übermittelt werden (siehe Accessibility API).

Hinweis: Dies betrifft insbesondere das Einblenden der Auswahlliste der Autocomplete-Funktion, weil andernfalls nicht wahrnehmbar ist, dass Werte zur Auswahl zur Verfügung stehen.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
628Desktop: PositionGröße und Position des gewählten Elements in der Auswahlliste müssen an die Accessibility API übermittelt werden (siehe Fokusindikator))MussEN 301 549: 11.5.2.13

Informationen zu diesem Artikel

Datum:
5.10.2023
Lizenz:
CC-BY-SA 4.0
Version:
0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!