Dostępność widgetów autouzupełniania

Wzorzec combobox WAI-ARIA definiuje konkretny zestaw ról i właściwości dla widżetów autocomplete. Combobox to element input połączony z wyskakującą listą listbox. Wzorzec zapewnia, że czytniki ekranu prawidłowo informują użytkowników, którzy nie widzą interfejsu, o interaktywnym działaniu, dostępnych opcjach i bieżącym wyborze.

Element input należy umieścić w elemencie div z atrybutem role="combobox". Informuje to technologie asystujące, że z polem wejściowym powiązana jest wyskakująca lista. Na elemencie opakowującym należy ustawić aria-expanded={isOpen}, aby poinformować czytniki ekranu, czy lista sugestii jest obecnie widoczna, czy ukryta.

Sam element input powinien mieć: aria-autocomplete="list" (wyskakujące okno zawiera listę sugestii), aria-haspopup="listbox" (kliknięcie lub pisanie otwiera listbox), aria-expanded={isOpen} oraz aria-controls="suggestion-list-id" wskazujący na wartość id elementu listy rozwijanej.

Atrybut aria-activedescendant na elemencie input wskazuje wartość id aktualnie wyróżnionej opcji. Gdy selectedIndex ma wartość 0, należy ustawić aria-activedescendant="option-0". Czytniki ekranu używają tego atrybutu, aby informować, który element jest aktywny, bez przenoszenia rzeczywistego fokusu z pola wejściowego. Gdy żadna opcja nie jest wybrana, należy usunąć ten atrybut albo ustawić go na pusty ciąg znaków.

Element kontenera menu rozwijanego powinien mieć role="listbox" oraz unikatowy id zgodny z wartością aria-controls elementu input. Rola ta informuje drzewo dostępności, że jest to lista opcji, które można wybrać. Listbox otrzymuje fokus pośrednio dzięki atrybutowi aria-activedescendant na elemencie input.

Każdy element sugestii powinien mieć role="option" oraz unikatowy id, taki jak option-0, option-1 itd. Należy dodać aria-selected={index === selectedIndex}, aby wskazać, który element jest obecnie wyróżniony. Gdy użytkownik porusza się za pomocą klawiszy strzałek, czytniki ekranu odczytują zarówno treść opcji, jak i informację, czy jest ona zaznaczona.

Gdy użytkownik naciśnie ArrowDown, a aria-activedescendant zostanie zaktualizowany do option-1, VoiceOver odczyta coś w rodzaju "hooki Reacta, 2 z 5". Czytnik ekranu automatycznie odczytuje tekst opcji i jej pozycję na liście na podstawie znaczników ARIA. Do obsługi nawigacji za pomocą klawiatury nie są potrzebne dodatkowe regiony live.

Należy przeprowadzić testy za pomocą VoiceOver w systemie macOS (Cmd+F5 przełącza tę funkcję) oraz NVDA w systemie Windows (bezpłatne pobranie). Należy przejść do pola wejściowego i zacząć pisać. Trzeba sprawdzić, czy czytnik ekranu ogłasza rolę combobox, liczbę znalezionych wyników oraz każdą opcję podczas poruszania się strzałkami. Zachowanie należy porównać z przykładami z WAI-ARIA Authoring Practices Guide.

Podczas asynchronicznego ładowania sugestii należy dodać niewidoczny wizualnie element div z atrybutami aria-live="polite" i aria-atomic="true". Po zakończeniu ładowania należy aktualizować jego treść: "Znaleziono 5 wyników" lub "Nie znaleziono wyników". Czytnik ekranu ogłosi ten komunikat po zakończeniu bieżącej wypowiedzi, dzięki czemu użytkownicy otrzymają informacje bez przerywania ich.

WAI-ARIA Authoring Practices Guide (APG) pod adresem w3.org/WAI/ARIA/apg zawiera osobną stronę poświęconą wzorcowi combobox, działające przykłady kodu oraz szczegółową specyfikację interakcji z klawiaturą. Podczas implementowania interaktywnych widżetów, takich jak autocomplete, okna dialogowe czy karty, należy zawsze korzystać z APG, aby zapewnić pełną zgodność z wymaganiami dostępności.

Jeśli nie istnieje widoczny element label, należy podać atrybut aria-label na elemencie input: aria-label="Search suggestions". Nie należy polegać wyłącznie na elemencie placeholder jako etykiecie — znika on po rozpoczęciu pisania i nie wszystkie czytniki ekranu odczytują go w spójny sposób. Widoczny element label z atrybutem htmlFor jest zawsze najlepszym rozwiązaniem.

Jaki jest cel atrybutu aria-activedescendant na elemencie input autocomplete?

Na elemencie opakowującym należy użyć role="combobox", a na elemencie input — aria-autocomplete="list", aria-expanded, aria-controls i aria-activedescendant, aby połączyć pole wejściowe z listą sugestii. Każda opcja wymaga role="option", unikatowego id oraz aria-selected. Dla asynchronicznych liczników wyników należy dodać region aria-live.