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.
Darstellung
Permalink zu "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. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 617 | Kontrast | Die Beschriftung der Optionen in der Auswahlliste der Autocomplete-Funktion müssen einen Kontrast von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 618 | Kontrast | Die gewählte Option in der Auswahlliste der Autocomplete-Funktion muss einen Kontrast von mindestens 3:1 zu benachbarten Optionen aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 619 | Fokussichtbarkeit | Bei der Tastaturnavigation durch die Listeneinträge, muss die aktuelle Option im sichtbaren Bereich angezeigt werden. | Muss | EN 301 549: 11.2.4.7 |
Bedienung
Permalink zu "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. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 620 | Tastaturbedienung | Die Optionen in der Auswahlliste der Autocomplete-Funktion müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 621 | Aktualisierungen | Bei Fokussierung und Bedienung des Eingabefeldes mit Autocomplete-Funktion darf keine unerwartete Kontextänderung erfolgen. | Muss | EN 301 549: 11.3.2.1 und 11.3.2.2 |
| 622 | Klickbereich | Der Klickbereich der Listeneinträge der Auswahlliste sollen mindestens 24 x 24 px betragen. | Soll | WCAG 2.2: 2.5.8 (AA) |
Tastaturbedienung Eingabefeld mit Autocomplete-Funktion
Permalink zu "Tastaturbedienung Eingabefeld mit Autocomplete-Funktion"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Öffnen der Auswahlliste | Texteingabe | Erforderlich |
| Schließen der Auswahlliste | EINGABE 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 AB | Erforderlich |
| 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 zu "Zeigeinstrumentbedienung Eingabefeld mit Autocomplete-Funktion"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Schließen der Auswahlliste | Linksklick auf einen Wert innerhalb der geöffneten Liste | Erforderlich |
| Schließen der Auswahlliste | Linksklick außerhalb des kombinierten Eingabefeldes (bestehend aus dem Eingabefeld und der Auswahlliste) | Erforderlich |
| Wertauswahl innerhalb der Auswahlliste | Linksklick auf einen Wert | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "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. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 623 | Rolle | Die 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. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 624 | Desktop: Elementhierarchie | Die Eltern-Kind-Beziehungen der Elemente innerhalb der Liste müssen an die Accessibility API übermittelt werden. | Muss | EN 301 549: 911.5.2.9 |
| 624 | Status | Der 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“. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5, 1.5.2.9 |
| 625 | Name | Die Gruppenbeschriftung der Listeneinträge muss (sofern vorhanden) an die Accessibility API übermittelt werden. | Muss | EN 301 549: 9.1.3.1, 11.1.3.1 |
| 626 | Bedienung | Die Auswahlliste der Autocomplete-Funktion muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 627 | Aktualisierung | Aktualisierungen 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. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
| 628 | Desktop: Position | Größe und Position des gewählten Elements in der Auswahlliste müssen an die Accessibility API übermittelt werden (siehe Fokusindikator)) | Muss | EN 301 549: 11.5.2.13 |