Die ARIA-Combobox ist ein zusammengesetztes Widget, das ein beschriftetes Eingabefeld mit einem Popup kombiniert. Bei einer typischen Combobox mit Listbox-Popup, die Sie beispielsweise von Suchfunktionen kennen, können Nutzende eine Zeichenfolge direkt in ein Eingabefeld eingeben, aus einer Liste von Vorschlägen auswählen oder beides kombinieren (“find as you type”).
Auch wenn das Widget in der Umsetzung leicht variieren kann, so zielt die ARIA-Combobox grundsätzlich darauf ab, Nutzende bei der Eingabe zu unterstützen. Bei den angebotenen Optionen handelt es sich entweder um „vorgegebene“, „erlaubte“ oder „vorgeschlagene“ Werte. Neben der Listbox kann das Popup auch ein Dialog, Grid oder Tree-Widget sein. Eine Combobox mit Grid-Popup (siehe Beispiel) ermöglicht (Tastatur)-Nutzenden etwa, zusätzliche kontextbezogene Informationen im Popup strukturiert zu erkunden. Öffnet sich beim Tippen in ein Datumsfeld ein Kalender, so ist dies ein Beispiel für eine Combobox mit Dialog-Popup.
Die ARIA-Spezifikation definiert die grundlegende Anatomie der Combobox, einschließlich ihrer Rollen, Zustände, Eigenschaften und Werte. Zeigten sich in der spezifizierten Struktur der bisherigen Versionen 1.0 und 1.1 noch verschiedene Probleme hinsichtlich der Darstellung für den Screenreader, so konnte die aktuelle Version ARIA 1.2 aufgrund von deutlichen Änderungen diese Probleme ausräumen und für eine bessere Zugänglichkeit des Widgets sorgen.
In ARIA 1.1 war die Rolle combobox für eine Umsetzung ohne Texteingabefeld (vergleichbar mit dem nativen <select>) noch nicht vorgesehen. Man fand in der entsprechenden Version des ARIA Authoring Practices Guide (APG) für die benutzerdefinierte Form des <select> einen eigenen Widget-Typ mit dem Namen "Collapsable Listbox Dropdown". Er wird heute als "deprecated" (veraltet) eingestuft.
Wie der Name vermuten lässt, sieht das Interaktionsmuster der select-only Combobox lediglich die Auswahl aus einer Liste vorgegebener Optionen vor (vergleichbar mit dem nativen <select>). Im Gegensatz zur editierbaren Combobox wird sie nicht mithilfe eines <input>-Elements umgesetzt (siehe Abschnitt Semantik).
Die editierbare Combobox ist das, was viele von uns typischerweise mit einer Combobox verbinden: Texteingabe in Kombination mit einer dynamisch verfügbaren Vorschlagsliste. Das Widget verhält sich ähnlich wie das HTML-Element <input> mit <datalist>.
Je nach Umsetzung kann die Combobox Vorschläge unabhängig von der Texteingabe anzeigen (ohne Filterverhalten), oder die Texteingabe bestimmt die dargestellten Auswahloptionen (mit Filterverhalten). Ob die Combobox gefilterte Vorschläge auslösen könnte und wie diese dargestellt werden, drückt semantisch der Wert des Attributs aria-autocomplete aus (siehe Abschnitt ARIA-Attribute der Combobox). Die Übernahme eines Vorschlags erfolgt manuell oder automatisch.
Die editierbare Combobox ohne Filterverhalten blendet eine Auswahlliste mit einer Reihe von immer gleichen Vorschlägen ein. Die Vorschläge ändern sich beim Tippen nicht.
Ist eine editierbare Combobox mit einer filterbare Auswahlliste umgesetzt, passt diese sich entsprechend der eingegebenen Zeichen dynamisch an. Sie präsentiert nur Optionen, die mit dem eingegebenen Text (beziehungsweise Teile davon) übereinstimmen oder in einem logischen Zusammenhang stehen, das heißt, je nachdem kann das Popup während der Eingabe erscheinen und verschwinden.
Bei einer editierbaren Combobox mit Inline-Vervollständigung erscheint der Teil des ersten passenden Vorschlags, der nicht von den Nutzenden eingegeben wurde, “inline” hinter der Einfügemarke in der Combobox. Die Zeichenfolge zur Vervollständigung sollte optisch hervorgehoben sein und einen ausgewählten Status haben. Die Inline-Vervollständigung wird in der Regel mit einer Auswahlliste kombiniert.
Editerbare Combobox mit Filterverhalten (inline-Vervollständigung und Liste), Quelle: www.w3.org, ARIA Authoring Practices Guide (APG)
Wie bei allen benutzerdefinierten Komponenten müssen Sie auch bei der ARIA-Combobox für Semantik, Tastaturbedienung und Fokusmanagement sorgen. Die erwartete Verhaltensweise bei Bedienung mit der Tastatur lässt sich wie folgt zusammenfassen:
Durch die Eingabe von Zeichen können Nutzende eine Vorschlagsliste auslösen. Der Fokus bleibt dabei auf dem Eingabefeld. Die assistive Technologie kommuniziert jedoch den erweiterten Zustand des Widgets.
Alternativ können Nutzende die Combobox mit der ↓ Pfeil unten-Taste öffnen. In diesem Fall erhält die erste Option der Liste (bei automatischer Auswahl die erste mit den eingegebenen Zeichen übereinstimmende Option) einen visuellen Fokus („Pseudo-Fokus“) und wird vom Screenreader vorgelesen. Der DOM-Fokus bleibt dabei auf dem Eingabefeld (siehe Abschnitt Fokusmanagement).
Alt + ↓ Pfeil unten öffnet ebenfalls die Combobox, jedoch ohne den visuellen Fokus zu verschieben.
Die Navigation innerhalb der eingeblendeten Vorschlagsliste erfolgt mit den Pfeiltasten, der Wert der Combobox ändert sich dabei nicht. Bei einer filterbaren Liste können Nutzende jederzeit mit einer erneuten Eingabe von Zeichen eine dynamische Anpassung der Vorschläge erreichen.
Esc schließt die Auswahlliste und setzt den visuellen Fokus zurück auf das Eingabefeld.
Ist eine „manuelle Auswahl“ für die Bedienung des Widgets vorgesehen, können Nutzende eine (mit den Pfeiltasten) ausgewählte Option aktiv mit ↩ Eingabe übernehmen, alternativ geben sie die Zeichenfolge komplett ein. Der aktivierte und damit übernommene Wert ist im geschlossenen Zustand sichtbar.
Bei der „automatischen Auswahl“ wird der erste Vorschlag, der mit der eingegebenen Zeichenfolge übereinstimmt, automatisch als ausgewählt hervorgehoben. Bei Bedarf können Nutzende mit den Pfeiltasten einen anderen Vorschlag auswählen oder sie ändern die Zeichenfolge im Eingabefeld. Die automatische Übernahme des ausgewählten Vorschlags für die Combobox erfolgt, indem die Nutzenden die ↹ Tab-Taste drücken. Der Fokus liegt dann auf dem nächsten fokussierbaren Element nach der Combobox.
Im ARIA Authoring Practices Guide (APG) des W3C finden Sie eine detaillierte Übersicht der Tastatureingaben sowie Erläuterungen zu entsprechendem Verhalten. Auch wenn es sich beim APG nicht um ein normatives Dokument handelt, so ist es für die Nutzenden hilfreich, wenn Sie sich an Konventionen orientieren.
Der Fokus (DOM-Fokus) muss bei dem beschriebenen Interaktionsmuster auf dem Eingabefeld bleiben, um die Eingabe eines Werts zu ermöglichen. Da der Fokus stets nur an einer Stelle sein kann, hilft eine Art „Pseudo-Fokus“ beim Erkunden der Vorschläge. Der „Pseudo-Fokus“ bildet das fokussierte Objekt im Accessibility Tree ab. Der Screenreader weiß daher, welches Element innerhalb der Liste aktiv ist. Die assistive Technologie kann das aktive Element vorlesen, obwohl sich der tatsächliche DOM-Fokus auf dem Container-Element befindet.
Das Attribut aria-activedescendant steuert (vom Eingabefeld aus) diesen Pseudo-Fokus. Es wird auf das Element mit der Rolle combobox gesetzt und „zeigt“ auf die Optionen in der Liste, indem der Wert von aria-activedescendant der id des fokussierten Elements entspricht. Damit die Screenreader-Ausgabe beim Navigieren innerhalb der Liste funktioniert, muss sich der Wert von aria-activedescendant entsprechend der Position des visuellen Fokus dynamisch ändern. Das Attribut aria-activedescendant sollte geleert (aria-activedescendant="") oder entfernt werden, wenn Nutzende Zeichen eingeben. Andernfalls können Screenreader-Nutzende nicht mit dem zu bearbeitenden Text interagieren.
With aria-activedescendant, the browser keeps the DOM focus on the container element or on an input element that controls the container element. However, the user agent communicates desktop focus events and states to the assistive technology as if the element referenced by aria-activedescendant has focus.
Mit semantischen Informationen kommunizieren Sie die Bedeutung von Elementen sowie deren Zustände. Nicht-visuell Nutzende können daraufhin das zu erwartende Verhalten ableiten. Um die notwendige Semantik für die Combobox zur Verfügung zu stellen, hält die ARIA-Spezifikation einen Satz von Attributen bereit. Bevor wir uns mit diesem Vokabular im Detail beschäftigen, sollten wir uns noch einmal die grundlegende Struktur des zusammengesetzten Widgets vergegenwärtigen: Die ARIA-Combobox besteht maßgeblich aus einem Element, das als Combobox identifiziert werden muss, einer zugehörigen Beschriftung und einem optionalen Schalter sowie aus einer Listbox, die im Ausgangszustand versteckt ist und durch Interaktion mit der Combobox sichtbar wird.
Für die select-only Combobox zeichnen Sie dafür ein nicht semantisches <div> oder <span> mit role="combobox" aus. Stellen Sie außerdem mit tabindex="0" sicher, dass Nutzende das Element mit der Tastatur fokussieren können. Für die editierbare Combobox zeichnen Sie ein <input> mit role="combobox" aus.
Code-Beispiel (HTML): Select-only Combobox, ohne Beschriftung und spezifizierte ARIA-Attribute
Wie jedes interaktive Element benötigt die Combobox einen zugänglichen Namen, das heißt, eine Beschriftung, die den Zweck des Eingabefeldes oder der Auswahlliste aussagekräftig wiedergibt. Wenn Sie ein <input> einsetzen, verwenden Sie ein verknüpftes <label>-Element. Alternativ referenzieren Sie die sichtbare Beschriftung mit dem Attribut aria-labelledby und sorgen dadurch für deren programmatische Ermittelbarkeit.
Code-Beispiel (HTML): Select-only Combobox mit Beschriftung, ohne spezifizierte ARIA-Attribute
Viele Umsetzungen bieten neben der Combobox eine grafische Schaltfläche an. Sie dient einerseits als Indikator für das mögliche Popup und andererseits als Bedienelement, mit dem Nutzende von Zeigegeräten (zum Beispiel Maus oder Touch) die Auswahlliste anzeigen können.
Zeichnen Sie die Schaltfläche als <button> aus. Die Spezifikation empfiehlt, das Element für Tastaturnutzende mithilfe von tabindex="-1" aus der Reihenfolge der Fokusstationen zu nehmen. Sie sollten sicherstellen, dass der <button> nicht ein Nachfahre der Combobox ist.
Code-Beispiel (HTML): Editierbare Combobox mit Beschriftung und Schalfläche, ohne spezifizierte ARIA-Attribute
Der Schalter benötigt einen zugänglichen Namen. Er sollte wie die Combobox (siehe ARIA-Attribute der Combobox) mit den Attributen aria-controls und aria-expanded ausgezeichnet werden, da auch er den Zustand des Widgets beeinflussen kann.
Für eine Umsetzung gemäß aktueller Spezifikation setzen Sie folgende ARIA-Attribute auf das Element, das die Rolle combobox hat (bei der select-only Combobox ist es das <div>, bei der editierbaren Combobox das <input>-Element).
Mit aria-expanded kommunizieren Sie den Zustand des Widgets, genauer gesagt, ob die Combobox geöffnet oder geschlossen ist. Im geschlossenen Zustand hat das input-Element das Attribut aria-expanded mit dem Wert "false" („reduziert“). Wenn sich der Zustand ändert und die Listbox sichtbar wird, wechselt der Wert dynamisch auf "true" („erweitert“).
Das Attribut aria-haspopup identifiziert die Art des zu erwartenden Popups. Der Wert des Attributs entspricht der Rolle des Popups (listbox, dialog, grid oder tree).
Die Rolle combobox bringt aria-haspopup="listbox" implizit mit. Das heißt, Sie müssen das Attribut mit entsprechendem Wert nur setzen, wenn das Popup ein dialog, grid oder tree ist. Beachten Sie außerdem: aria-haspopup="true" ist gleichzusetzen mit aria-haspopup="menu". Verwenden Sie daher aria-haspopup="true"nicht für die Combobox.
Mit aria-controls definieren Sie das Element, das von der Combobox gesteuert wird. Da die Combobox die Listbox und deren Sichtbarkeit steuert, entspricht der Wert von aria-controls der id der Listbox.
Das Attribut aria-activedescendant ist für das Fokusmanagement zuständig. Der Wert von aria-activedescendant muss der id der fokussierten Option entsprechen, damit die assistive Technologie weiß, welches Element der Auswahlliste aktiv ist. Der Screenreader wird dieses referenzierte Element als das „fokussierte“ wahrnehmen, obwohl der tatsächliche DOM-Fokus auf dem Container-Element liegt.
Der Wert des Attributs aria-autocomplete zeigt an, ob die Combobox von der Text-Eingabe abhängige Vorschläge auslösen könnte und wie mögliche Vorschläge dargestellt werden. Es ist nur für die editierbare Combobox relevant.
aria-autocomplete="none": Die Vorschläge sind nicht von der Eingabe der Nutzenden abhängig. Eine Combobox bringt implizit aria-autocomplete="none" mit. Wenn Sie also kein aria-autocomplete setzen, ist dies gleichbedeutend mit einer Auszeichnung aria-autocomplete="none".
aria-autocomplete="list": Die angezeigten Vorschläge in Form einer Liste beziehen sich auf die Texteingabe.
aria-autocomplete="inline": Vorschläge zur Vervollständigung werden “inline” angezeigt. Der vorgeschlagene Text zur Vervollständigung des Wertes erscheint dynamisch im Feld hinter der Eingabemarke und wird als Wert der Eingabe automatisch akzeptiert, wenn der Fokus mit ↹ Tab geändert wird.
aria-autocomplete="both": Vorschläge werden sowohl als Liste als auch “inline” angezeigt.
Code-Beispiel (HTML): Editierbare Combobox mit Beschriftung und spezifizierten ARIA-Attributen
Liegt der Fokus auf der Combobox, so lautet die Screenreader-Ausgabe (Firefox-Browser mit NVDA) in etwa: „Liebstes Obst – Kombinationsfeld – reduziert – bearbeitbar – leer“.
Die (eingeblendete) Listbox präsentiert die zur Verfügung stehenden Optionen. Screenreader kommunizieren den Namen, den Status und die Position jeder Option der Liste. Bitte beachten Sie: Interaktive Elemente wie Links oder Schaltflächen werden innerhalb eines Elementes mit der Rolle option nicht unterstützt. Semantische Informationen wie Überschriften sind für assistive Technologien nicht verfügbar.
Jedes Kind-Element der Listbox sollte mit role="option" (oder role="group") ausgezeichnet sein. Der Textinhalt von option liefert den zugänglichen Namen der Option.
Falls Optionen mithilfe von role="group" gruppiert werden ("option group"), sind die Kind-Elemente der jeweiligen "option group" mit der Rolle option auszuzeichnen. Eine "option group" benötigt ebenfalls einen zugänglichen Namen. Verwenden Sie dafür role="group" zusammen mit dem Attribut aria-label oder aria-labelledby.
Das Attribut aria-selected kommuniziert den Zustand einer Option. Der Wert sollte (mithilfe von JavaScript) zwischen "false" auf "true" wechseln. Im nicht ausgewählten Zustand könnte das Attribut auch weggelassen werden, da role="option" implizit aria-selected="false" mitbringt. Wichtig ist jedoch, dass Sie aria-selected="true" für die Option der Listbox einsetzen, die visuell als ausgewählt hervorgehoben ist und durch aria-activedescendant referenziert wird.
Öffnen Nutzende die Combobox mit der Pfeiltaste, ist der Fokus auf die erste Option der Listbox zu legen. Der Screenreader kündigt die Liste an („Liste …“ oder „Liste [Name] …“, wenn die Listbox explizit einen zugänglichen Namen hat (siehe vollständiges Codebeispiel) und gibt die fokussierte Option sowie deren Position innerhalb der Liste aus („… Apfel – nicht ausgewählt – 1 von 10“).
Wird die Combobox aufgrund der Eingabe von Zeichen geöffnet, bleibt der Fokus auf dem Eingabefeld, nur der veränderte Zustand des Widgets wird kommuniziert („erweitert“).
Nach Übernahme eines Wertes mit ↩ Eingabe (manuelle Auswahl), gibt die assistive Technologie erneut die Combobox, den Zustand („reduziert“) und den übernommenen Wert aus.
Manche Umsetzende binden eine sogenannte Statusmeldung (Live-Region) ein. Diese Statusmeldung liefert Informationen zu vorhandenen Vorschlägen und zur Bedienung des Widgets. Nachdem die Nutzenden ein paar Zeichen getippt haben, hören sie bei Verwendung eines Screenreaders eine Meldung wie etwa: „10 Vorschläge verfügbar – Auswahl mit Pfeiltasten nach oben oder unten, Übernahme mit der ↩ Eingabe-Taste.“
Sollten Sie sich für die Umsetzung einer solchen Live-Region entscheiden, stellen Sie sicher, dass sie auch vom Screenreader ausgegeben wird: Achten Sie darauf, dass beim Laden der Seite ein Live-Container (ausgezeichnet mit role="status" aria-atomic="true") im DOM bereits vorhanden ist. Erst beim Auslösen der Meldung darf der Status-Text (oder ein sich ändernder Bestandteil der Meldung) per JavaScript in den Live-Container eingefügt werden.
Wie bereits zu Beginn dieses Artikels erwähnt, hat sich die definierten Anatomie des Widgets mit den Versionen der Spezifikation geändert (ARIA-Wiki). Verständlicherweise führt dies nicht selten zu Verwirrung bei den Umsetzenden. Viele Komponenten-Bibliotheken folgen noch der Version 1.1 und auch in vielen Ressourcen ist noch das alte Muster beschrieben. Für eine bestmögliche Zugänglichkeit sollten Sie die Combobox entsprechend der aktuellen Fassung 1.2 umsetzen. Folgende Übersicht soll bei der Orientierung helfen:
Bei der aktuell definierten ARIA-Combobox 1.2 (empfohlen) ist das <input>-Element mit role="combobox" und den spezifizierten ARIA-Attributen ausgezeichnet. Das Attribut aria-controls ist auf dem Element mit der Rolle combobox.
Die ARIA-Combobox 1.1 (veraltet) wird mit einem Combobox-Container umgesetzt. Dieser Container ist mit role="combobox" und bestimmten ARIA-Attributen ausgezeichnet. Der Container enthält das <input>-Element, welches ebenfalls mit bestimmten ARIA-Attributen ausgezeichnet ist. Das Attribut aria-owns ist auf dem Element mit der Rolle combobox.
Das Muster ARIA-Combobox 1.0 (veraltet) ähnelt der aktuellen ARIA 1.2 Combobox. Statt aria-controls ist jedoch das Attribut aria-owns hier auf dem Element mit der Rolle combobox.
Prüfen Sie, ob Sie zwingend eine benutzerdefinierte Implementierung benötigen. Insbesondere im Falle eines select-only-Verhaltens ist die Umsetzung als natives <select> vorzuziehen. Native HTML-Elemente funktionieren zuverlässig und vorhersehbar mit dem Screenreader, bei Tastaturbedienung und auf mobilen Geräten (siehe partielle Unterstützung von aria-activedescendant, VoiceOver / Safari unter macOS, 11/2021). Modernes CSS bietet die Möglichkeiten einer über alle Browser hinweg konsistenten Gestaltung der geschlossenen select-Box.
Sorgen Sie für eine sichtbare, programmatisch ermittelbare Beschriftung der Combobox. Da sich der zugängliche Name von dem Wert der Combobox unterscheidet, können Nutzende von assistiven Technologien sowohl den Namen (Beschriftung) als auch den (übernommenen) Wert für das Widget wahrnehmen.
Stellen Sie eine schlüssige Tastaturbedienung und ein korrektes Fokusmanagement sicher. Testen Sie das erwartete Verhalten mit der Tastatur. Prüfen Sie, ob der Screenreader die Optionen des Popups bei Navigation mit den Pfeiltasten ausgibt, während der DOM-Fokus auf dem Element mit der Rolle "combobox" ist.
Stellen Sie sicher, dass Sie Beziehungen und Zustände der Combobox-Komponenten mit den richtigen ARIA-Attributen programmatisch abbilden. Dadurch werden Interaktionen (beispielsweise das Einblenden der Auswahlliste) auch bei nicht-visueller Nutzung verständlich und vorhersehbar.
Sorgen Sie für eine gute Fokushervorhebung sowohl des Eingabefeldes als auch der fokussierten Elemente der Auswahlliste. Achten Sie auf einen Mindestkontrast von 3,0:1 für den Fokus-Rahmen oder für die eingesetzten Hintergrund-Flächen, die Sie als Hervorhebung verwenden.
Setzen Sie die Combobox nach der Spezifikation ARIA 1.2 um. Sie verbessern dadurch die Nutzbarkeit mit dem Screenreader gegenüber Umsetzungen nach dem veralteten Standard ARIA 1.1.
