Redakcja
Pole combobox to widżet, do którego przypisane jest wyskakujące okienko, które umożliwia użytkownikom wybranie wartości wejściowej z listy. Może mieć ono formę listy, siatki, drzewa lub okna dialogowego.
W niektórych implementacjach wyskakujące okienko prezentuje dozwolone wartości, a w innych – wartości sugerowane. Wiele implementacji zawiera również trzeci element opcjonalny – graficzny przycisk „Otwórz” obok pola, który wskazuje dostępność wyskakującego okienka. Aktywacja przycisku „Otwórz” wyświetla wyskakujące okienko, jeśli sugestie są dostępne.
Wzorzec pola combobox obsługuje kilka opcjonalnych zachowań. Tym, który najbardziej wpływa na interakcję, jest wprowadzanie tekstu. Niektóre pola pozwalają użytkownikom na wpisywanie i edycję tekstu w polu, a inne nie. Jeśli pole combo nie obsługuje wprowadzania tekstu, jest określane jako pole typu „tylko wybór”, co oznacza, że jedynym sposobem, w jaki użytkownicy mogą ustawić jego wartość, jest wybranie wartości w pojawiającym się okienku. Na przykład, w niektórych przeglądarkach element HTML „select” o rozmiarze „size="1” jest prezentowany technologiom wspomagającym jako pole. Alternatywnie, jeśli pole obsługuje wprowadzanie tekstu, jest ono określane jako edytowalne. Edytowalne pole combo może zezwalać użytkownikom na wprowadzanie dowolnej wartości lub ograniczać swoją wartość do dyskretnego zestawu dozwolonych wartości. W takim przypadku wpisywanie danych służy do filtrowania sugestii wyświetlanych w wyskakującym okienku.
Wyskakujące okienko jest domyślnie ukryte, tj. jego domyślnym stanem jest jego zwinięcie. Warunki, które uruchamiają rozwinięcie – wyświetlenie wyskakującego okienka – są specyficzne dla każdej implementacji.
Przykładowy problem elementów kontrolnych na stronie to pole, które „przedstawia” się jako aria-label=search, a role ma combobox. Zamiast wyszukania (tekst+ ENTER) zwraca listę podpowiedzi, która nie jest widoczna dla technologii asystujących. Możliwym rozwiązaniem dla danego problemu jest jego poprawienie przez naprawienie listy lub zastąpienie tego elementu przez zwykłą wyszukiwarkę, która po wpisaniu tekstu da możliwość zwrócenia listy (nawet jeśli ktoś nie wybrał sugestii z listy podpowiedzi).
Na stronach możemy rozróżnić kilka wariantów dropdownów (comboboxów). Poniżej są one opisane wraz z metodami prowadzenia testów
a. tylko wybór
OPIS: rozwijana lista jednokrotnego wyboru bez możliwości wpisania wartości
METODA projektowania, kodowania i testowania: zgodnie z Select-Only Combobox Example | APG | WAI | W3C https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
b. edytowalny z możliwością wyboru
METODA projektowania, kodowania i testowania: zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
c. edytowalny z autouzupełnianiem
METODA projektowania, kodowania i testowania: zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
d. edytowalny z przykładami
METODA projektowania, kodowania i testowania: zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/
e. edytowalny, bez rozwijania
METODA projektowania, kodowania i testowania: zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/grid-combo/
f. wybór daty
METODA projektowania, kodowania i testowania: zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-datepicker/
Dobre praktyki testowania
- Wszystkie dropdowny powinny być obsługiwane przy pomocy tych samych klawiszy klawiatury. Różne działanie podobnych elementów wprowadzają użytkownika w błąd.
- Mnogość różnego typu comboboxów na stronie to nie jest bezpośrednio problem dostępności, a raczej UX. Najlepiej dla danej funkcji jest mieć jeden typ kontrolki, ale w określonych sytuacjach dopuszcza się więcej.
- Z perspektywy dostępności, jako testerzy, musimy sobie odpowiedzieć na pytanie czy dany dropdown jest możliwy do obsłużenia z poziomu technologii asystujących? Czy bez użycia oczu mogę z danej kontrolki skorzystać? Odpowiedź twierdząca jest zaliczeniem testu.
