Dostępna lista rozwijana, select i combobox

Zaktualizowano 14 października 2026 · 5 min czytania

„Lista rozwijana” (dropdown) oznacza wiele rzeczy: natywny select, własny widżet tylko do wyboru, pole wyszukiwania z podpowiedziami, menu nawigacyjne. Ta strona dotyczy list rozwijanych w formularzach – natywnego select i comboboksa z APG. Rozwijane menu nawigacji to inny wzorzec: zob. menu nawigacyjne. Strona należy do serii dostępne wzorce interfejsu.

Kiedy którego użyć

Natywny <select> do wyboru jednej wartości ze stałej listy: kraj, rozmiar, ilość, kolejność sortowania. Ma wbudowaną nazwę, rolę, wartość i obsługę klawiatury. Samo APG zauważa, że „element HTML select z size="1" jest przedstawiany technologiom wspomagającym jako combobox”.
Zwykłe pole tekstowe z etykietą, gdy dowolny tekst jest w porządku, a podpowiedzi nie są niezbędne.
Combobox ARIA tylko wtedy, gdy potrzeba czegoś, czego select nie umie: podpowiedzi wyszukiwania, filtrowania długiej listy podczas pisania, rozbudowanych opcji. To jeden z najtrudniejszych do poprawnego wykonania wzorców APG.

Kryteria WCAG

4.1.2 Nazwa, rola, wartość (A): udostępnione nazwa, rola, stan rozwinięcia i bieżąca wartość.
3.3.2 Etykiety lub instrukcje (A): widoczna etykieta, a nie tylko placeholder.
2.1.1 Klawiatura (A) i 2.1.2 Bez pułapki na klawiaturę (A).
3.2.2 Podczas wprowadzania danych (A): zmiana wartości nie może zmieniać kontekstu (nowa strona, nowe okno), chyba że użytkownik został wcześniej uprzedzony. Błąd W3C F37 obejmuje nowe okna otwierane po zmianie wyboru w select.
1.3.5 Określenie pożądanej wartości (AA): autocomplete na polach zbierających dane osobowe, np. kraj.
4.1.3 Komunikaty o stanie (AA): „Dostępnych podpowiedzi: 5” albo „Brak wyników” odczytywane bez przenoszenia fokusu.
1.4.13 Treść spod kursora lub fokusu (AA), jeśli okienko pojawia się po otrzymaniu fokusu.

Przykład kodu

<!-- 1. Natywny select: zwykle wystarcza -->
<label for="country">Kraj</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Wybierz kraj</option>
  <option value="PL">Polska</option>
  <option value="DE">Niemcy</option>
</select>

<!-- 2. Edytowalny combobox z okienkiem listbox (wzorzec APG) -->
<label for="search">Szukaj produktów</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Podpowiedzi" hidden>
  <li id="opt-1" role="option">Buty do biegania</li>
  <li id="opt-2" role="option">Skarpety do biegania</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

Co musi zrobić skrypt według APG:

Po otwarciu okienka: pokazać listę, ustawić aria-expanded="true" i aria-controls="search-list" (APG mówi, że aria-controls trzeba ustawiać tylko wtedy, gdy okienko jest widoczne).
Gdy opcja zostaje podświetlona strzałkami: fokus DOM zostaje na polu, a aria-activedescendant="opt-1" wskazuje opcję; oznaczyć ją aria-selected="true" i widocznym podświetleniem.
Po zamknięciu: ukryć listę, aria-expanded="false", usunąć aria-activedescendant.
Po wpisaniu tekstu zaktualizować region statusu liczbą podpowiedzi.
aria-autocomplete ma wartość none, list lub both, zgodnie z tym, co robi widżet. APG wymienia cztery zachowania autouzupełniania: brak, lista z ręcznym wyborem, lista z automatycznym wyborem oraz lista z uzupełnianiem w polu.

Obsługa klawiaturą

Według wzorca combobox z APG:

Klawisz	Fokus na comboboksie	Fokus w okienku listbox
Strzałka w dół	Przenosi do okienka, jeśli jest dostępne	Następna opcja
Strzałka w górę	Opcjonalnie: ostatnia opcja w okienku	Poprzednia opcja
Alt + strzałka w dół	Opcjonalnie: otwiera okienko bez przenoszenia fokusu	—
Enter	Akceptuje wybraną podpowiedź (edytowalny combobox)	Akceptuje opcję, zamyka okienko, wstawia wartość do pola
Escape	Zamyka okienko; opcjonalnie czyści pole, jeśli okienko było już zamknięte	Zamyka okienko, przywraca fokus na combobox
Pisanie	Filtruje podpowiedzi	—

Typowe błędy w sklepach internetowych

Własny „select” rozmiaru lub ilości zbudowany z elementów div, otwierany tylko kliknięciem myszy.
Placeholder zamiast etykiety („Szukaj…”), który znika podczas pisania.
Podpowiedzi wyszukiwania, które nigdy nie są odczytywane: brak komunikatu o stanie, brak aria-expanded, brak aria-activedescendant.
Strzałki przewijają stronę zamiast przechodzić przez podpowiedzi albo Tab jest uwięziony w liście podpowiedzi.
Listy sortowania lub języka przeładowujące stronę po zmianie, przez co użytkownik klawiatury przeskakuje na nową stronę, przeglądając opcje.
role="combobox" na otaczającym div zamiast na polu, które otrzymuje fokus.
Okienko zamyka się, gdy najedzie się na nie myszą, albo zasłania kolejne pole bez możliwości zamknięcia.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Automatycznie (reguła axe-core)	Co znajduje
`select-name`	`select` bez etykiety
`label`, `aria-input-field-name`	Pole tekstowe lub `role="combobox"` / `listbox` bez nazwy
`aria-required-attr`	Combobox bez wymaganego atrybutu, np. `aria-expanded`
`aria-valid-attr-value`	`aria-controls` lub `aria-activedescendant` wskazujące nieistniejący identyfikator, nieprawidłowe wartości
`aria-required-children`, `aria-required-parent`	`listbox` bez elementów `option`, `option` poza listboksem
`autocomplete-valid`	Nieprawidłowe wartości `autocomplete` na polach danych osobowych

Wszystkie to karty z naszej biblioteki reguł. Skan widzi stronę w stanie po załadowaniu, więc otwarta lista podpowiedzi nie jest testowana; rozszerzenie przeglądarki sprawdza stronę w stanie, w jakim ją Państwo zostawią, więc najpierw warto coś wpisać w wyszukiwarkę. Test ręczny: proszę używać wyłącznie klawiatury (pisanie, strzałki, Enter, Escape, Tab) i sprawdzić czytnikiem ekranu, czy liczba podpowiedzi i podświetlona opcja są odczytywane.

Proszę uruchomić darmową kontrolę jednej strony. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Czy natywny element select jest dostępny?

Tak, jeśli ma etykietę. Przeglądarki i technologie wspomagające dobrze go obsługują; APG zauważa, że select z size="1" jest przedstawiany technologii wspomagającej jako combobox. To najbezpieczniejszy wybór dla kraju, rozmiaru czy kolejności sortowania.

Co to jest combobox?

W APG to widżet pola wprowadzania z powiązanym wyskakującym okienkiem, który pozwala wybrać wartość ze zbioru. Może służyć tylko do wyboru albo być edytowalny, np. pole wyszukiwania z podpowiedziami.

Jakich atrybutów ARIA potrzebuje combobox?

role="combobox" na polu, aria-expanded true lub false, aria-controls wskazujące okienko, gdy jest widoczne, aria-activedescendant dla podświetlonej opcji oraz aria-autocomplete zgodne z zachowaniem. Okienko to zwykle listbox z opcjami.

Czy select może przenosić na inną stronę po zmianie wartości?

Tylko jeśli użytkownik został o tym wcześniej poinformowany. 3.2.2 Podczas wprowadzania danych nie pozwala na zmianę kontekstu po zmianie wartości bez wcześniejszego uprzedzenia. Prostym rozwiązaniem jest osobny przycisk „Przejdź” lub „Zastosuj”.

Czy kontrola automatyczna może przetestować combobox?

Znajduje select lub combobox bez etykiety, brakujące wymagane atrybuty ARIA i odwołania do nieistniejących identyfikatorów. Nie przetestuje strzałek, tego, czy podpowiedzi są odczytywane, ani tego, czy działa Escape.

Źródła

W3C WAI, APG Combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
W3C WAI, APG Developing a Keyboard Interface (aria-activedescendant): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
W3C, Understanding 4.1.3 Status Messages: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html