Combobox i autouzupełnianie bez błędów

Combobox to pole wejściowe połączone z wyskakującą listą podpowiedzi. Przykładem są pola wyszukiwania, które podczas pisania rozwijają pasujące wyniki. 🔍

Combobox składa się z text input, w którym użytkownik wpisuje tekst, oraz osobnego wyskakującego listboxa z opcjami. ARIA łączy te elementy, aby czytniki ekranu rozpoznawały ich powiązanie.

Umieść role="combobox" bezpośrednio na polu tekstowym. Informuje to technologie asystujące, że wpisywanie w tym miejscu wyświetli listę wyboru.

Użyj na polu wejściowym atrybutu aria-controls i ustaw jego wartość na id wyskakującego elementu. Łączy on pole z listboxem, który jest otwierany i zamykany.

Ustawiaj aria-expanded na true, gdy lista jest widoczna, i na false, gdy jest ukryta. Czytniki ekranu ogłaszają stan wyskakującego okna na podstawie tego atrybutu.

Kontener podpowiedzi otrzymuje role="listbox", a każda podpowiedź — role="option". Zapewnia to użytkownikom znajomą listę, po której można się poruszać.

Najważniejsza zasada: fokus klawiatury nigdy nie opuszcza input. Użytkownik może nadal pisać, a klawisze strzałek przemieszczają wyróżnienie między opcjami.

Ustaw na polu wejściowym aria-activedescendant wskazujący id wyróżnionej opcji. Dzięki temu czytnik ekranu odczytuje aktywny wybór bez przenoszenia rzeczywistego fokusu.

Strzałki w dół i w górę przemieszczają się między opcjami, klawisz Enter wybiera aktywną opcję, a Escape zamyka wyskakujące okno. Te klawisze pochodzą bezpośrednio z APG.

Ustaw aria-selected="true" na wyróżnionej opcji, a false na pozostałych. W comboboxie z wyborem pojedynczym jednocześnie powinna być wybrana tylko jedna opcja.

Użyj aria-autocomplete, aby opisać sposób wyświetlania podpowiedzi: "list" dla filtrowanego menu lub "both", gdy tekst jest również uzupełniany bezpośrednio w polu.

Combobox to pole wejściowe połączone z listboxem: połącz je za pomocą aria-controls i aria-expanded, zachowaj fokus w polu i śledź aktywną opcję za pomocą aria-activedescendant. ✅