Přístupný rozbalovací seznam, select a combobox

Aktualizováno 14. října 2026 · Čtení na 5 min

„Rozbalovací seznam“ (dropdown) znamená mnoho věcí: nativní select, vlastní prvek jen pro výběr, vyhledávací pole s našeptávačem, navigační menu. Tato stránka se věnuje rozbalovacím seznamům ve formulářích — nativnímu select a comboboxu podle APG. Rozbalovací navigace je jiný vzor: viz navigační menu. Stránka je součástí série přístupné vzory UI.

Kdy použít co

Nativní <select> pro výběr jedné hodnoty z pevného seznamu: země, velikost, množství, řazení. Název, roli, hodnotu i ovládání klávesnicí má vestavěné. Samo APG uvádí, že „HTML prvek select se size="1" se asistivním technologiím předává jako combobox“.
Obyčejné textové pole s popiskem, když stačí volný text a návrhy nejsou nezbytné.
Combobox s ARIA jen tehdy, když potřebujete něco, co select neumí: návrhy při vyhledávání, filtrování dlouhého seznamu během psaní, bohatší možnosti. Je to jeden z nejtěžších vzorů APG.

Související kritéria WCAG

4.1.2 Název, role, hodnota (A): zpřístupněný název, role, stav rozbalení a aktuální hodnota.
3.3.2 Popisky nebo instrukce (A): viditelný popisek, ne jen zástupný text (placeholder).
2.1.1 Klávesnice (A) a 2.1.2 Žádná past pro klávesnici (A).
3.2.2 Při vstupu (A): změna hodnoty nesmí změnit kontext (nová stránka, nové okno), pokud na to uživatelé nebyli předem upozorněni. Selhání W3C F37 se týká nových oken otevřených při změně selectu.
1.3.5 Určení účelu vstupu (AA): autocomplete u polí, která sbírají osobní údaje, například zemi.
4.1.3 Stavové zprávy (AA): „K dispozici je 5 návrhů“ nebo „Žádné výsledky“ se oznámí bez přesunu fokusu.
1.4.13 Obsah při najetí myší nebo fokusu (AA), pokud se vyskakovací seznam objeví při fokusu.

Příklad kódu

<!-- 1. Nativní select: obvykle stačí -->
<label for="country">Země</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Vyberte zemi</option>
  <option value="PL">Polsko</option>
  <option value="DE">Německo</option>
</select>

<!-- 2. Editovatelný combobox s vyskakovacím listboxem (vzor APG) -->
<label for="search">Hledat produkty</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Návrhy" hidden>
  <li id="opt-1" role="option">Běžecké boty</li>
  <li id="opt-2" role="option">Běžecké ponožky</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

Co musí skript podle APG dělat:

Při otevření: zobrazit seznam, nastavit aria-expanded="true" a aria-controls="search-list" (podle APG stačí aria-controls nastavit jen tehdy, když je vyskakovací seznam viditelný).
Při zvýraznění možnosti šipkami: fokus DOM zůstává na vstupním poli a aria-activedescendant="opt-1" odkazuje na možnost; označte ji aria-selected="true" a viditelným zvýrazněním.
Při zavření: skrýt seznam, aria-expanded="false", odebrat aria-activedescendant.
Po psaní aktualizovat stavovou oblast počtem návrhů.
aria-autocomplete má hodnotu none, list nebo both podle toho, co váš prvek dělá. APG uvádí čtyři chování automatického doplňování: žádné, seznam s ručním výběrem, seznam s automatickým výběrem a seznam s doplněním přímo v poli.

Ovládání klávesnicí

Podle vzoru combobox v APG:

Klávesa	Fokus na comboboxu	Fokus ve vyskakovacím listboxu
Šipka dolů	Přesune se do vyskakovacího seznamu, pokud je k dispozici	Další možnost
Šipka nahoru	Volitelně: poslední možnost v seznamu	Předchozí možnost
Alt + šipka dolů	Volitelně: otevře seznam bez přesunu fokusu	—
Enter	Přijme vybraný návrh (editovatelný combobox)	Přijme možnost, zavře seznam, vloží hodnotu do pole
Escape	Zavře seznam; pokud už je zavřený, volitelně vymaže pole	Zavře seznam, vrátí fokus na combobox
Psaní	Filtruje návrhy	—

Časté chyby v e-shopech

Vlastní „select“ pro velikost nebo množství z prvků div, který jde otevřít jen kliknutím myší.
Zástupný text místo popisku („Hledat…“), který při psaní zmizí.
Návrhy vyhledávání, které se nikdy neoznámí: žádná stavová zpráva, žádné aria-expanded, žádné aria-activedescendant.
Šipky posouvají stránku místo procházení návrhů, nebo Tab uvízne v seznamu návrhů.
Selecty řazení nebo jazyka, které při změně znovu načtou stránku, takže uživatel klávesnice při procházení možností skočí na novou stránku.
role="combobox" na obalujícím div místo na vstupním poli, které dostává fokus.
Vyskakovací seznam se zavře, když na něj najedete myší, nebo překryje další pole a nejde zavřít.

Co najde automatická kontrola a co ruční testování

Automaticky (pravidlo axe-core)	Co najde
`select-name`	`select` bez popisku
`label`, `aria-input-field-name`	Textové pole nebo `role="combobox"` / `listbox` bez názvu
`aria-required-attr`	Combobox bez povinného atributu, například `aria-expanded`
`aria-valid-attr-value`	`aria-controls` nebo `aria-activedescendant` odkazující na neexistující ID, neplatné hodnoty
`aria-required-children`, `aria-required-parent`	`listbox` bez potomků `option`, `option` mimo listbox
`autocomplete-valid`	Neplatné hodnoty `autocomplete` u polí s osobními údaji

Všechna jsou kartami v naší knihovně pravidel. Sken vidí stránku tak, jak se načte, takže otevřený seznam návrhů se netestuje; rozšíření prohlížeče kontroluje stránku ve stavu, v jakém ji necháte, proto nejdřív něco napište do vyhledávání. Ruční testování: používejte jen klávesnici (psaní, šipky, Enter, Escape, Tab) a se čtečkou obrazovky si poslechněte, zda se oznamuje počet návrhů a zvýrazněná možnost.

Spusťte bezplatnou kontrolu jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Je nativní prvek select přístupný?

Ano, pokud má popisek. Prohlížeče i asistivní technologie ho dobře podporují; APG uvádí, že select se size="1" se asistivním technologiím předává jako combobox. Pro zemi, velikost nebo řazení je to nejbezpečnější volba.

Co je combobox?

V APG vstupní prvek s přidruženým vyskakovacím seznamem, ve kterém uživatel vybírá hodnotu z kolekce. Může sloužit jen k výběru, nebo být editovatelný, například vyhledávací pole s našeptávačem.

Které atributy ARIA combobox potřebuje?

role="combobox" na vstupním poli, aria-expanded true nebo false, aria-controls odkazující na vyskakovací seznam, dokud je viditelný, aria-activedescendant pro zvýrazněnou možnost a aria-autocomplete odpovídající chování. Vyskakovací část je obvykle listbox s možnostmi.

Smí select po změně hodnoty přejít na jinou stránku?

Jen pokud jsou na to uživatelé předem upozorněni. 3.2.2 Při vstupu nepovoluje změnu kontextu při změně hodnoty bez předchozího upozornění. Jednoduchým řešením je samostatné tlačítko „Přejít“ nebo „Použít“.

Otestuje combobox automatická kontrola?

Najde select nebo combobox bez popisku, chybějící povinné atributy ARIA a odkazy na neexistující ID. Neotestuje šipky, zda se návrhy oznamují, ani zda funguje Escape.

Zdroje

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