Kombiniertes Eingabefeld

Synonyme: Kombinationsfeld, Combobox

Siehe auch: Auswahlliste, Ausklappliste, Menüschaltfläche, Eingabefeld mit Autocomplete-Funktion

Kombinierte Eingabefelder ermöglichen die Texteingabe und die Auswahl von Optionen aus einer Liste, wobei die Liste geöffnet und geschlossen werden kann (siehe DIN EN ISO 9241-161: 8.7).

Im geschlossenen Status besteht ein kombiniertes Eingabefeld aus einem Eingabefeld und einem Schalter (mit Pfeil-Icon) zum Öffnen der Liste, der sich rechts vom Eingabefeld befindet. 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.

Kombinierte Eingabefelder können sehr unterschiedlich umgesetzt werden. Umsetzungsvarianten sind u. a.:

• Solange das Eingabefeld leer ist, wird im geöffneten Status unter dem Eingabefeld eine Auswahlliste mit allen Optionen angezeigt. Sofern das Eingabefeld Text enthält, werden in der Auswahlliste unter dem Eingabefeld nur Optionen angezeigt, die den bereits eingegebenen Text enthalten oder mit diesem beginnen. Passen keine Optionen zum eingegebenen Text, wird keine Auswahlliste eingeblendet.
• Die Auswahlliste enthält unabhängig von der Texteingabe bestimmte häufig verwendete Werte.
• Das kombinierte Eingabefeld besitzt zwei Auswahllisten. Die Listeneinträge der einen Liste sind unabhängig von der Texteingabe, in der zweiten Liste werden erst nach der Texteingabe übereinstimmende Listeneinträge angezeigt.
• Die Texteingabe dient nur dem Filtern der Optionen in der Auswahlliste. Die Eingabe von Text, der mit keiner der vorgegebenen Optionen übereinstimmt, ist nicht möglich.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

• JAWS: [Beschriftung] kombiniertes Eingabefeld reduziert | erweitert [Wert] [Hinweis zur Texteingabe und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Kombinationsfeld reduziert | erweitert [mit Autovervollständigung] bearbeitbar [Wert]
• Windows Sprachausgabe: [Beschriftung] [Wert] Kombinationsfeld bearbeiten ausgeblendet | erweitert

Das kombinierte Eingabefeld sollte mit den HTML-Elementen <input type=… list=ID> sowie <datalist id=ID> und <option> umgesetzt werden.

• Bei folgenden Werten im type-Attribut kann das list-Attribut sinnvoll verwendet werden: text, search, url, tel, email.
• Bei folgenden Werten im type-Attribut darf das list-Attribut gemäß der HTML-Spezifikation ebenfalls verwendet werden. Dies wird aber von den meisten Browsern nicht unterschützt und führt teilweise zu irreführender Ausgabe durch die Screenreader: date, month, week, time, datetime-local, number, range, color.

Der initiale Wert wird über das value-Attribut beim <input>-Element übermittelt.

Die Beschriftung sollte mit dem Element <label for=ID> mit dem kombinierten Eingabefeld verknüpft werden.

Das kombinierte Eingabefeld kann als Pflichtfeld (required), deaktiviert (disabled) bzw. schreibgeschützt (readonly) ausgezeichnet werden.

Die Listeneinträge können nicht als deaktiviert oder schreibgeschützt ausgezeichnet werden. Die Listeneinträge können nicht gruppiert werden.

Weitere Informationen: 4.10.8 The datalist element - HTML Standard (whatwg.org), 4.10.5.3.9 The list attribute - HTML Standard (whatwg.org)

Achtung: Da sich die ARIA-Spezifikation hinsichtlich combobox in den letzten Jahren mehrfach grundlegend geändert hat, kann nicht garantiert werden, dass die kombinierten Eingabefelder, die mit ARIA umgesetzt werden, von allen Screenreadern korrekt ausgegeben wird. Es wird empfohlen, stattdessen das native kombinierte Eingabefeld zu verwenden. Alternativ sollte die ARIA-Umsetzung umfassend mit verschiedenen Browsern und Screenreadern getestet werden.
Achtung: Häufig wird für Eingabefelder mit Autocomplete-Funktion oder Ausklapplisten das ARIA-Pattern für kombinierte Eingabefelder verwendet. Diese drei Elemente unterscheiden sich jedoch hinsichtlich ihrer Bedeutung und Bedienung und sollten nicht verwechselt werden.

Wird das kombinierte Eingabefeld nicht mit den HTML-Elementen umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=combobox übermittelt. Die Rolle muss sich an einem Eingabefeld befinden (<input type=text>).
• Der Wert des Eingabefeldes (value-Attribut) wird als Wert des kombinierten Eingabefeldes übermittelt.
• Die Beschriftung des kombinierten Eingabefeldes kann per aria-label oder aria-labelledby erfolgen.
• Der Status der Ausklappliste (geschlossen oder geöffnet = Auswahlliste sichtbar) muss mit aria-expanded übermittelt werden.
• Vom Element mit role=combobox wird per aria-controls auf die Auswahlliste verwiesen.
• Das Autocomplete-Verhalten des kombinierten Eingabefeldes wird mit aria-autocomplete übermittelt.
• Die Auswahlliste wird mit role=listbox und deren Listeneinträge mit role=option ausgezeichnet.
• Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Der Schalter mit dem Pfeil-Icon, über den die Auswahlliste geöffnet werden kann, erhält nicht den Tastaturfokus (tabindex=-1), soll jedoch so ausgezeichnet werden, dass er bei der Navigation mit dem virtuellen Cursor von der Assistenztechnologie ausgegeben wird. Der Schalter soll aussagekräftig beschriftet werden, per aria-controls auf die Auswahlliste verweisen und per aria-expanded den Status der Auswahlliste übermitteln.
• Das kombinierte Eingabefeld kann mit aria-disabled als deaktiviert ausgezeichnet werden.
• Das kombinierte Eingabefeld kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Das kombinierte Eingabefeld kann mit aria-required als Pflichtfeld ausgezeichnet werden.
• Die Darstellung des kombinierten Eingabefeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare kombinierte Eingabefeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
• Bei der Navigation durch die Listeneinträge sollte der fokussierte Listeneintrag im sichtbaren Bereich angezeigt werden.

Weitere Informationen: combobox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Combobox Pattern | APG | WAI | W3C

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!