Přístupné přepínače a zaškrtávací políčka

Přepínače a zaškrtávací políčka patří k nejjednodušším ovládacím prvkům HTML — a zároveň k nejčastěji rozbitým na e-shopech, protože designéři chtějí vlastní vzorky barev, přepínače a filtrační štítky. Tato stránka ukazuje, jak je udržet přístupné. Je součástí série přístupné vzory UI.

Kdy použít které

APG popisuje skupinu přepínačů jako sadu zaškrtávacích tlačítek, z nichž „nejvýše jedno může být zaškrtnuté“, a zaškrtávací políčka jako dvoustavová (zaškrtnuté nebo ne) nebo třístavová s dalším stavem částečného zaškrtnutí — například „Vybrat vše“, když jsou vybrané jen některé položky.

Související kritéria WCAG

• 1.3.1 Informace a vztahy (A): skupina a její otázka musí být v kódu, nejen ve vzhledu.
• 3.3.2 Popisky nebo instrukce (A): každá možnost má popisek; skupina má otázku.
• 4.1.2 Název, role, hodnota (A): role, název a stav zaškrtnutí jsou zpřístupněné.
• 2.1.1 Klávesnice (A) a 2.4.7 Viditelný fokus (AA).
• 1.4.11 Netextový kontrast (AA): rámeček nebo kolečko a stav zaškrtnutí potřebují kontrast 3:1.
• 2.5.8 Velikost cíle (minimum) (AA): klikatelný popisek cíl zvětší.
• 3.2.2 Při vstupu (A): výběr možnosti nesmí nečekaně změnit kontext, například znovu načíst stránku pro jinou zemi.

Příklad kódu

<fieldset>
  <legend>Způsob doručení</legend>

  <input type="radio" id="ship-courier" name="shipping" value="courier" checked>
  <label for="ship-courier">Kurýr, 1–2 dny, 6,90 €</label>

  <input type="radio" id="ship-locker" name="shipping" value="locker">
  <label for="ship-locker">Výdejní box, 2–3 dny, 3,90 €</label>
</fieldset>

<fieldset>
  <legend>Barva</legend>
  <!-- Vzorky: skutečný input zůstává, mění se jen jeho vzhled -->
  <input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
  <label for="c-navy" class="swatch" style="--swatch:#1f2a44">Námořnická modrá</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Souhlasím s <a href="/cs/terms">obchodními podmínkami</a></label>

Poznámky:

• fieldset a legend jsou technika W3C H71. Ta uvádí, že jsou nejdůležitější u přepínačů a zaškrtávacích políček se společným názvem pole a nejsou potřeba, když otázku jasně vyjadřují už jednotlivé popisky.
• U vzorků ponechte v popisku text „Námořnická modrá“ (v případě potřeby vizuálně skrytý), aby barva nebyla sdělována jen barvou.
• Nativní input skryjte vizuálně technikou clip, nikdy display: none ani visibility: hidden, které ho odstraní z ovládání klávesnicí i ze čteček obrazovky. Když má input fokus, zobrazte viditelný obrys fokusu na popisku.
• Pokud stavíte vlastní ovládací prvek bez nativního inputu, vzor APG používá role="radiogroup" s potomky role="radio" nebo role="checkbox", aria-checked (true, false a u zaškrtávacích políček mixed), popisek skupiny a plnou podporu klávesnice, kterou napíšete sami. Nativní input je mnohem jednodušší.

Ovládání klávesnicí

Podle vzorů skupiny přepínačů a zaškrtávacího políčka v APG:

Uvnitř panelu nástrojů (toolbar) podle APG šipky přesouvají fokus beze změny zaškrtnuté možnosti a mezerník ji zaškrtne.

Časté chyby na e-shopech

• Vzorky barev a velikostí postavené jako div nebo span s obsluhou kliknutí — bez role, bez klávesnice, bez stavu.
• Nativní input skrytý pomocí display: none za pěkně nastylovaným popiskem.
• Filtry jako zaškrtávací políčka, která při každém kliknutí bez upozornění znovu načtou stránku a přesunou fokus nahoru.
• Skupiny bez otázky: přepínače „Ano / Ne“, jejichž otázka je jen vizuální nadpis.
• Stav zaškrtnutí naznačený jen tenkou změnou barvy okraje s nízkým kontrastem nebo u vzorků jen barvou.
• Text „Souhlasím s obchodními podmínkami“ nepropojený se zaškrtávacím políčkem, takže kliknutí na text nic neudělá a čtečka obrazovky přečte „zaškrtávací políčko, nezaškrtnuto“ bez názvu.
• Drobné cíle zaškrtávacích políček v seznamech filtrů na mobilu.

Co najdou automatizované kontroly a co ruční testování

Všechna mají kartu v naší knihovně pravidel. Ruční testování je potřeba pro chování klávesnice (šipky ve skupinách, mezerník), viditelný fokus u vlastních vzorků, kontrast rámečku a stavu zaškrtnutí (1.4.11), to, zda má každá skupina jasnou otázku, a zda výběr možnosti mění kontext. S netextovým kontrastem pomůže kontrola kontrastu barev.

Otestujte stránku produktu bezplatnou kontrolou jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Kdy použít přepínače a kdy zaškrtávací políčka?

Přepínače, když lze ze skupiny vybrat právě jednu možnost, například způsob doručení. Zaškrtávací políčka, když každou možnost lze zapnout nebo vypnout samostatně, například filtry nebo „Souhlasím s obchodními podmínkami“.

Potřebují přepínače fieldset a legend?

Obvykle ano. Technika W3C H71 uvádí, že fieldset a legend jsou nejdůležitější u přepínačů a zaškrtávacích políček se společnou otázkou, protože jednotlivé popisky neříkají, na co se ptáte. Nejsou potřeba, když jsou popisky srozumitelné samy o sobě.

Jak uživatelé klávesnice ovládají skupinu přepínačů?

Tab přesune fokus do skupiny a ven z ní, šipky přecházejí mezi možnostmi a vybírají je a mezerník vybere možnost s fokusem. Tak se chovají nativní přepínače i vzor skupiny přepínačů v APG.

Mohu použít zaškrtávací políčka s vlastním vzhledem?

Ano, pokud skutečný input zůstane na stránce a mění se jen jeho vzhled. Skrytí inputu přes display none a vykreslení divu místo něj ho odstraní z ovládání klávesnicí i ze čteček obrazovky.

Dokáže automatizovaná kontrola otestovat přepínače a zaškrtávací políčka?

Najde vstupy bez popisku, vlastní zaškrtávací políčka bez názvu a pole s více popisky. Nepozná, zda má skupina jasnou otázku nebo zda vlastní ovládací prvek funguje z klávesnice.

Zdroje

• W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
• W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
• W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71