Přístupné vzory UI: WCAG, WAI-ARIA a APG
Aktualizováno 14. října 2026 · Čtení na 6 min
Když hledáte „WCAG combobox“ nebo „WCAG tabs“, skončíte ve třech různých dokumentech W3C, které odpovídají na různé otázky. Tato série vysvětluje každý běžný vzor rozhraní e-shopu: k čemu slouží, která kritéria WCAG se na něj vztahují, krátký správný příklad v HTML, očekávané chování klávesnice a co automatizovaná kontrola najde a co ne. Tato stránka vysvětluje, jak dokumenty do sebe zapadají, a obsahuje přehled všech vzorů.
Jde o technické doporučení, nikoli o právní poradenství.
WCAG vs WAI-ARIA vs ARIA Authoring Practices
| Dokument | Co to je | Na co odpovídá |
|---|---|---|
| WCAG 2.2 | Doporučení W3C, standard za EN 301 549 a většinou zákonů | Jaký má být výsledek: ovládání klávesnicí, názvy, kontrast, chybové zprávy |
| WAI-ARIA 1.2 | Doporučení W3C (6. června 2023) s rolemi, stavy a vlastnostmi | Jak sdělit asistivním technologiím, co vlastní prvek je: role="tab", aria-expanded |
| ARIA Authoring Practices Guide (APG) | Doporučení W3C WAI se vzory a příklady | Jak se má widget chovat: které klávesy, jaké přesuny fokusu, které atributy |
WCAG nejmenuje ani jeden widget. Říká například, že každý ovládací prvek musí zpřístupnit svůj název, roli a stav (4.1.2), že vše musí fungovat z klávesnice (2.1.1), že fokus musí být viditelný (2.4.7) a že struktura musí být v kódu, nejen ve vzhledu (1.3.1). Většinu z toho vám nativní HTML dá zdarma. Když stavíte něco, co HTML nemá — záložky, combobox s našeptávačem, karusel —, WAI-ARIA vám to umožní popsat a APG říká, jaké chování od toho uživatelé asistivních technologií očekávají.
W3C popisuje WAI-ARIA jako způsob, jak zpřístupnit „dynamický obsah a pokročilé ovládací prvky uživatelského rozhraní“, a APG jako doprovodný zdroj, který „doporučuje postupy, jež vývojářům webových aplikací pomáhají vytvářet“ přístupné widgety. APG není požadavkem na shodu: WCAG můžete splnit i jiným, dobře otestovaným návrhem. Jeho vlastní úvod říká, že testování s asistivními technologiemi „je nezbytné před použitím kódu z tohoto průvodce v produkci“.
Nejdřív nativní HTML
Poznámka W3C Using ARIA to uvedla jako první pravidlo používání ARIA: pokud můžete použít nativní prvek nebo atribut HTML, který už má potřebnou sémantiku a chování vestavěné, použijte jej, místo abyste přepracovali jiný prvek a přidali ARIA. Další pravidla: neměňte nativní sémantiku, pokud opravdu nemusíte; všechny interaktivní ovládací prvky ARIA musí jít ovládat klávesnicí; nikdy nedávejte role="presentation" ani aria-hidden="true" na prvek, který může získat fokus. (Tato poznámka je dnes zveřejněna jako ukončený návrh a pro další rady odkazuje na APG, pravidla ale zůstávají běžným základem.)
APG říká totéž vlastními slovy: „Žádná ARIA je lepší než špatná ARIA“ a „role je slib“. Přidáním role="button" k div slibujete tlačítko, ale „role ARIA nezpůsobí, že prohlížeč zajistí chování klávesnice nebo vzhled“ — prvek musíte sami zpřístupnit fokusu a reagovat na Enter a mezerník.
<!-- Nativní: název, role, fokus a klávesnice zdarma -->
<button type="button">Přidat do košíku</button>
<!-- Přestavěné: každý kus se musí doplnit ručně a často se zapomene -->
<div role="button" tabindex="0" onclick="add()" onkeydown="addOnEnterOrSpace(event)">Přidat do košíku</div>
Vzory v této sérii
Základní ovládací prvky
- Tlačítko vs odkaz — tlačítka něco dělají, odkazy někam vedou
- Odkazy, které se otevírají na nové kartě — kdy to dělat a jak upozornit
- Neaktivní tlačítka —
disabledvsaria-disabled, kontrast a vysvětlení - Přepínače a zaškrtávací políčka — popisky, skupiny a vlastní vzhled
Vyskakovací prvky a překryvy
- Rozbalovací seznam, select a combobox — nejdřív nativní
select, pak combobox podle APG - Modální dialog — fokus dovnitř, fokus uvnitř, fokus zpět
- Tooltip (popisek) — WCAG 1.4.13 a proč je vzor APG stále návrh
Navigace a struktura
- Navigační menu — proč APG pro weby doporučuje navigaci s rozbalovacími tlačítky (disclosure), ne
menubar - Drobečková navigace — pojmenovaný
navaaria-current="page" - Záložky —
tablist, šipky a automatická aktivace - Akordeon — nadpisy s tlačítky, nebo
detailsasummary - Datová tabulka — skutečný kód
table, záhlaví a titulky - Karusel — ovládání pozastavení, pojmenované snímky, žádné nečekané otáčení
Formuláře
- Validace formulářů a chybové zprávy — chyby textem, propojené s polem, oznámené
Co automatizovaná kontrola ve vzorech najde
Naše kontroly spouštějí axe-core ve skutečném prohlížeči na stránce tak, jak se načte. U vzorů to znamená, že spolehlivě najdou strukturální problémy: tlačítka a odkazy bez názvu, formulářová pole bez popisku, neznámé role, atributy ARIA, které pro danou roli nejsou povolené nebo odkazují na chybějící ID, tab mimo tablist, prvky s fokusem skryté pomocí aria-hidden. Každé zjištění odkazuje na svou kartu v knihovně pravidel.
Nenajdou problémy s chováním: zda šipky přecházejí mezi záložkami, zda fokus vstoupí do dialogu a poté se vrátí, zda se při otevření menu změní aria-expanded, zda lze karusel pozastavit. Obsah, který je při načtení stránky skrytý, například zavřený dialog, se netestuje vůbec; rozšíření prohlížeče kontroluje stránku ve stavu, který váš prohlížeč právě zobrazuje, takže můžete dialog nejdřív otevřít. Část s klávesnicí a čtečkou obrazovky si naplánujte podle článku jak testovat WCAG.
Začněte bezplatnou kontrolou jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.
Časté otázky
Jaký je rozdíl mezi WCAG a WAI-ARIA?
WCAG říká, jaký má být výsledek, například že každý ovládací prvek zpřístupňuje svůj název, roli a stav (4.1.2). WAI-ARIA je specifikace W3C s rolemi, stavy a vlastnostmi, která je jednou z cest k tomuto výsledku, když nativní HTML nestačí.
Vyžaduje WCAG ARIA?
Ne. WCAG je technologicky neutrální. Nativní prvky HTML jako button, a, input, select a table kritéria obvykle splňují bez jakékoli ARIA. ARIA je potřeba u vlastních widgetů, které HTML nenabízí, například u záložek.
Co je ARIA Authoring Practices Guide (APG)?
Zdroj W3C WAI, který popisuje, jak se mají chovat běžné widgety: jaké role a stavy používají a které klávesy podporují. Jde o doporučení, ne o požadavek WCAG, a W3C žádá, abyste jeho příklady před nasazením do produkce otestovali s asistivními technologiemi.
Jaké je první pravidlo ARIA?
Pokud už nativní prvek nebo atribut HTML má sémantiku a chování, které potřebujete, použijte jej místo přidávání ARIA k jinému prvku. Skutečné tlačítko je lepší než div s rolí button.
Dokáže automatizovaná kontrola otestovat vzory UI?
Částečně. Najde chybějící názvy, neplatné role a atributy ARIA a porušené vztahy nadřazených a podřízených rolí. Nepozná, zda fungují šipky, zda se správně přesouvá fokus nebo zda se při používání widgetu aktualizují stavy.
Zdroje
- W3C WAI, WAI-ARIA overview: https://www.w3.org/WAI/standards-guidelines/aria/
- W3C WAI, ARIA Authoring Practices Guide, Read Me First: https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/
- W3C WAI, APG patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
- W3C, Using ARIA (ukončený návrh, pravidla používání ARIA): https://www.w3.org/TR/using-aria/