Barrierefreiheit für Autocomplete-Widgets

Das WAI-ARIA-Combobox-Muster definiert eine bestimmte Gruppe von Rollen und Eigenschaften für Autocomplete-Widgets. Eine Combobox ist ein Eingabeelement, das mit einem eingeblendeten Listbox-Popup verbunden ist. Das Muster stellt sicher, dass Screenreader Benutzern, die die visuelle Benutzeroberfläche nicht sehen können, das interaktive Verhalten, die verfügbaren Optionen und die aktuelle Auswahl korrekt ankündigen.

Umschließen Sie das Eingabefeld mit einem div mit role="combobox". Dadurch wird assistiven Technologien mitgeteilt, dass das Eingabefeld über eine zugehörige Popup-Liste verfügt. Setzen Sie aria-expanded={isOpen} auf diesem Wrapper, um Screenreadern mitzuteilen, ob die Vorschlagsliste derzeit sichtbar oder ausgeblendet ist.

Das Eingabeelement selbst sollte folgende Attribute besitzen: aria-autocomplete="list" (das Popup enthält eine Vorschlagsliste), aria-haspopup="listbox" (durch Klicken oder Tippen wird eine Listbox geöffnet), aria-expanded={isOpen} und aria-controls="suggestion-list-id", das auf die id des Dropdown-Listenelements verweist.

aria-activedescendant am Eingabefeld verweist auf die id der aktuell hervorgehobenen Option. Wenn selectedIndex 0 ist, setzen Sie aria-activedescendant="option-0". Screenreader verwenden dieses Attribut, um anzukündigen, welches Element aktiv ist, ohne den tatsächlichen Fokus vom Eingabefeld zu verschieben. Wenn kein Element ausgewählt ist, entfernen Sie das Attribut oder setzen Sie es auf eine leere Zeichenfolge.

Das Container-Element des Dropdowns sollte role="listbox" und eine eindeutige id besitzen, die mit dem aria-controls des Eingabefelds übereinstimmt. Diese Rolle teilt dem Barrierefreiheitsbaum mit, dass es sich bei diesem Element um eine Liste auswählbarer Optionen handelt. Die Listbox erhält den Fokus indirekt über aria-activedescendant am Eingabefeld.

Jedes Vorschlagselement sollte role="option" und eine eindeutige id wie option-0, option-1 usw. besitzen. Fügen Sie aria-selected={index === selectedIndex} hinzu, um anzuzeigen, welches Element aktuell hervorgehoben ist. Screenreader kündigen sowohl den Inhalt der Option als auch an, ob sie ausgewählt ist, wenn der Benutzer mit den Pfeiltasten navigiert.

Wenn der Benutzer ArrowDown drückt und aria-activedescendant auf option-1 aktualisiert wird, kündigt VoiceOver beispielsweise "React-Hooks, 2 von 5" an. Der Screenreader liest den Optionstext und seine Position in der Liste automatisch aus dem ARIA-Markup vor. Für die Tastaturnavigation sind keine zusätzlichen Live-Regionen erforderlich.

Testen Sie mit VoiceOver unter macOS (mit Cmd+F5 ein- und ausschalten) und mit NVDA unter Windows (kostenloser Download). Navigieren Sie zum Eingabefeld und beginnen Sie zu tippen. Überprüfen Sie, ob der Screenreader die Combobox-Rolle, die Anzahl der gefundenen Ergebnisse und jede Option beim Navigieren mit den Pfeiltasten ankündigt. Vergleichen Sie das Verhalten mit den Beispielen im WAI-ARIA Authoring Practices Guide.

Wenn Vorschläge asynchron geladen werden, fügen Sie ein visuell verborgenes div mit aria-live="polite" und aria-atomic="true" hinzu. Aktualisieren Sie den Textinhalt, sobald das Laden abgeschlossen ist: "5 Ergebnisse gefunden" oder "Keine Ergebnisse gefunden". Der Screenreader kündigt diese Meldung nach Abschluss der aktuellen Sprachausgabe an, sodass Benutzer informiert bleiben, ohne unterbrochen zu werden.

Der WAI-ARIA Authoring Practices Guide (APG) unter w3.org/WAI/ARIA/apg enthält eine eigene Seite zum Combobox-Muster mit funktionierenden Codebeispielen und detaillierten Spezifikationen für die Tastaturinteraktion. Beziehen Sie sich bei der Implementierung interaktiver Widgets wie Autocomplete, Dialogen oder Tabs immer auf den APG, um eine vollständige Barrierefreiheit sicherzustellen.

Geben Sie dem Eingabefeld ein aria-label, wenn kein sichtbares Beschriftungselement vorhanden ist: aria-label="Search suggestions". Verlassen Sie sich für Beschriftungen nicht ausschließlich auf placeholder – Platzhalter verschwinden, sobald der Benutzer tippt, und werden nicht von allen Screenreadern zuverlässig angesagt. Ein sichtbares label-Element mit htmlFor ist immer die beste Option.

Welchen Zweck hat das Attribut aria-activedescendant an einem Autocomplete-Eingabefeld?

Verwenden Sie role="combobox" am Wrapper sowie aria-autocomplete="list", aria-expanded, aria-controls und aria-activedescendant am Eingabefeld, um das Eingabefeld mit der Vorschlagsliste zu verknüpfen. Jede Option benötigt role="option", eine eindeutige id und aria-selected. Fügen Sie eine aria-live-Region für die Anzahl asynchron geladener Ergebnisse hinzu.