Přístupnost webu podle WCAG standardů

Proč je přístupnost (a11y) klíčová

Webová přístupnost představuje soubor principů a technik, které zajišťují, že webové stránky a aplikace jsou použitelné osobami se zrakovým, sluchovým, pohybovým, kognitivním či jiným omezením. Standardem jsou Web Content Accessibility Guidelines (WCAG), které definují měřitelné požadavky na obsah, interakce a technologie. Dodržování WCAG přináší výhody všem uživatelům: zlepšuje použitelnost, výkon, SEO, kvalitu kódu a snižuje náklady na údržbu.

Struktura WCAG: principy, kritéria a úrovně shody

4 principy: Vnímatelnost (Perceivable), Ovládatelnost (Operable), Srozumitelnost (Understandable), Robustnost (Robust) – zkratka POUR.
Kritéria úspěšnosti: konkrétní, testovatelné požadavky; verze WCAG 2.x (2.0, 2.1, 2.2) postupně rozšiřují počet kritérií.
Úrovně: A (minimální), AA (doporučený cílový standard pro většinu organizací), AAA (nejvyšší – ne vždy prakticky dosažitelná pro celý web).

Vnímatelnost (Perceivable): informace musí být přístupné smyslům

Textové alternativy pro netextový obsah (obrázky, ikony, grafy) – smysluplné popisy v atributu alt, u dekorativních objektů alt="". Složitá data (např. infografiky) vyžadují podrobný popis v okolním textu.
Časově závislá média: titulky pro video, přepisy pro audio, audiopopis pro vizuálně důležité děje; synchronizace a správné označení jazyka.
Adaptabilita: používání sémantického HTML, správná hierarchie nadpisů (h2–h6), seznamy, tabulky pouze pro data, ne pro layout; použití ARIA landmarků (header, nav, main, footer).
Rozlišitelnost: minimální barevný kontrast textu vůči pozadí 4,5:1 (úroveň AA), u velkého textu 3:1; barva nesmí být jediným nosičem informace; možnost vypnutí animací a minimalizace blikání (zákaz záblesků >3×/s bez kontroly bezpečnosti).
Přizpůsobení rozvržení (reflow) a zvětšení: obsah se musí správně přizpůsobit reflow bez horizontálního scrollování a umožnit zvětšení až na 200 % bez ztráty funkčnosti; podpora uživatelských preferencí (např. prefers-reduced-motion).

Ovládatelnost (Operable): rozhraní a navigace musí být použitelné

Klávesnicová ovladatelnost na prvním místě: vše musí být ovladatelné klávesnicí bez ztráty fokusu; logické pořadí tabindexu; viditelný a dostatečně kontrastní stav fokusu.
Časová omezení a pohyb: dostatečné časové limity, možnost zastavit/pauznout/skryt pohyblivý obsah; vyhnout se automatickým obnovám stránky.
Prevence epileptických záchvatů: neblikající obsah nebo dodržení bezpečnostních parametrů; animace respektují nastavení reduced motion.
Navigace: konzistentní menu, skip links vedoucí k hlavnímu obsahu, sitemap, navigační cesta (breadcrumb); jasné pořadí fokusu v modálních oknech.
Gesta a indikátory: cílové oblasti tlačítek dostatečně velké; na mobilních zařízeních alternativa k přesným gestům; bez závislosti na síle přítlaku.
Rozšíření WCAG 2.2: Focus Appearance (viditelnost fokusu), Dragging Movements (alternativy k tažení), Target Size (Minimum) (minimální velikost interaktivních prvků), Redundant Entry (nevyžadovat opakované zadávání stejné informace) a Accessible Authentication (ověření bez kognitivní zátěže).

Srozumitelnost (Understandable): obsah a interakce musí být jasné

Čitelnost: srozumitelný jazyk, definovaný hlavní jazyk dokumentu (lang) a jazykové přepínače pro vložené pasáže.
Předvídatelnost: konzistentní umístění navigace a prvků; žádné neočekávané změny kontextu bez potvrzení (např. změna stránky po onchange bez tlačítka Odeslat).
Podpora při vyplňování: jednoznačné štítky (label), instrukce (help text), atributy autocomplete; validace srozumitelnými a programově zjistitelnými chybami; shrnutí chyb nad formulářem a přiřazení přes aria-describedby.
Chyby a prevence: důležité operace (nákup, smazání) vyžadují potvrzení, možnost úprav a revize; chybové signály nesmí být pouze na základě barvy.

Robustnost (Robust): kompatibilita s asistivními technologiemi

Validní HTML: korektní DOM, jedinečná ID, správné role; sémantika má přednost před ARIA.
ARIA: používat pouze tam, kde chybí nativní sémantika; správné použití role, aria-label/aria-labelledby, aria-expanded, aria-live; no ARIA is better than bad ARIA.
Komponenty: vlastní prvky (custom widgets) musí napodobovat chování nativních prvků (fokus, klávesové zkratky, stavy).

Barvy, kontrast a vizuální hierarchie

Kontrast textu: úroveň AA požaduje kontrast minimálně 4,5:1, u velkého textu minimálně 3:1; úroveň AAA stanoví cíl 7:1, respektive 4,5:1 pro velký text.
Interaktivní prvky: stavy hover/focus/active musí být jasně rozeznatelné; barevné informace doplněné tvarem, ikonou nebo textem.
Grafy a mapy: použití vzorů a symbolů místo výhradně barevného rozlišení; legendy musí být přístupné čtečkám obrazovky.

Formuláře: programovatelná a srozumitelná validace

Označování: každý vstupní prvek (input) má svůj popisek (label), placeholder neslouží jako náhrada za label; skupiny ovládacích prvků mají fieldset a legend.
Podpora a nápověda: používání aria-describedby pro tipy a chybové zprávy; jasné požadavky (formát data, hesla).
Chybové hlášky: přehledné shrnutí chyb s odkazy na konkrétní políčka; indikace nebarevnou formou; validace krok za krokem.
Autofill: konzistentní hodnoty autocomplete pro snížení kognitivní zátěže uživatele.

Multimédia: titulky, přepisy a audiopopis

Video: přesné a synchronní titulky; audiopopis pro důležité vizuální informace.
Audio: přepis; ovládací prvky pro pozastavení a regulaci hlasitosti dostupné klávesnicí.
Automatické přehrávání: výchozí stav vypnuto, uživatel má plnou kontrolu nad přehráváním.

Navigační vzory a informační architektura

Landmarky: použít elementy header, nav, main, aside, footer pro rychlou orientaci a pohyb pomocí čteček obrazovky.
Hlavičky a nadpisy: dodržovat logickou hierarchii bez přeskočení úrovní; nadpis by měl vystihovat obsah části.
Breadcrumb: orientace v hierarchii dokumentu; odkazy musí mít jednoznačné názvy (nikoliv „Zde“).

Interakce, ovládání a fokus

Viditelný fokus: dostatečná tloušťka a kontrast; fokus nesmí být zakrytý nebo schovaný pod pevně umístěnými prvky.
Správa pasti fokusu: modální okno navrací fokus po zavření na původní prvek; pořadí fokusu odpovídá vizuálnímu toku obsahu.
Klávesové zkratky: musí být dokumentované, nesmí kolidovat s nativními, možnost deaktivace nebo přemapování.

Responzivita, reflow a dotyková zařízení

Reflow: rozvržení bez horizontálního scrollování pro šířku nad 320 px; komponenty se přeskupí, přičemž nezanikají klíčové funkce.
Dotykové cíle: dostatečná velikost a mezery mezi prvky; alternativa k drag & drop (např. tlačítka pro přesun).
Orientace: aplikace funguje v režimu portrét i na šířku, pokud to neomezuje funkčnost.

Mezinárodní prostředí a jazyková podpora

Jazyk dokumentu: atribut lang="cs" na kořenovém elementu; pro inline cizí slova nastavení lang.
Formáty: lokální formát data, času, čísel a měn; podpora RTL (right-to-left) tam, kde je relevantní.

ARIA: kdy a jak správně používat

Priority: upřednostňovat nativní HTML před ARIA; role nesmí být v rozporu se sémantikou elementu.
Stavy a vlastnosti: správné použití atributů aria-expanded, aria-pressed, aria-current u navigace; oblastem s živým obsahem (aria-live) nedávat příliš mnoho dat, aby se nezahltily čtečky.
Vlastní komponenty: implementovat roving tabindex, role a klávesové vzory podle WAI-ARIA Authoring Practices (např. seznamy, menu, comboboxy).

Testování: metody, nástroje a metriky

Automatizace: používání linterů a skenerů (axe, pa11y, Lighthouse) – zachytí základní chyby, ale nenahrazují manuální testování.
Manuální testování: procházení klíčových částí pomocí klávesnice, testování pomocí čteček obrazovky (NVDA, JAWS, VoiceOver), mobilních čteček a ovládání přepínači (switch control).
Uživatelské testy: zapojení osob s postižením pro ověření srozumitelnosti a mentální zátěže.
Metriky: počet blokujících problémů na jednotlivý tok, doba dokončení úkolu, míra chybovosti, pokrytí kritérií AA úrovně.

Proces a governance: jak udržet shodu

Shift-left: požadavky na přístupnost od počátku definice hotového produktu; design tokeny s kontrastem, validace komponent přes a11y testy.
Design systém: auditované komponenty jako jedinečný zdroj pravdy; dokumentované vzory (modální okna, taby, menu, tabulky).
CI/CD: automatizované a11y testy v rámci pull requestů; vizuální regrese a testy kontrastu.
Role: vyčleněný a11y champion v týmu, pravidelné revize, školení designérů a vývojářů.

Časté prohřešky a jejich náprava

Text v obrázcích bez alternativ – nahradit skutečným textem nebo zajistit plnohodnotný alt či dlouhý popis (longdesc).
Placeholder jako label – vždy použít viditelný label; placeholder slouží pouze jako doplňková nápověda.
Nedostatečný kontrast – upravit barevnou paletu, vytvořit kontrastní varianty design tokenů, testovat v tmavém i světlém režimu.
Skrytí fokusu – nikdy neodstraňovat outline bez adekvátní náhrady; používat konzistentní a dostatečně viditelný indikátor fokusu.
Nekonzistentní nadpisová struktura – udržet logickou hierarchii bez přeskočení úrovní; každý obsahový blok musí mít smysluplný nadpis.

Implementační checklist (úroveň AA)

Vše ovladatelné klávesnicí, zřetelný fokus bez pastí.
Kontrast textu minimálně 4,5:1, jasně rozlišené interaktivní stavy.
Textové alternativy pro všechny netextové prvky s významem.
Responzivní reflow bez horizontálního scrollu, možnost zoomu 200 %.
Validní HTML, sémantické strukturování, použití landmarků.
Titulky a přepisy pro multimédia; kontrola přehrávání.
Formuláře s label, nápovědou, srozumitelnými chybami a podporou autocomplete.
Konzistentní navigace, skip linky, jednoznačné názvy odkazů.
Žádné automatické změny kontextu bez výslovného potvrzení