Přístupnost webu (WCAG): zásady a standardy

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

Webová přístupnost je soubor principů a technik, které zajišťují, aby webové stránky a aplikace mohly používat osoby se zrakovým, sluchovým, pohybovým, kognitivním či jiným omezením. Standardem jsou Web Content Accessibility Guidelines (WCAG), které popisují měřitelné požadavky na obsah, interakci a technologie. Dodržování WCAG prospívá 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ě přidávají nová kritéria.
Úrovně: A (minimální), AA (doporučený cíl pro většinu organizací), AAA (nejvyšší – ne vždy prakticky dosažitelná na celém webu).

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

Textové alternativy pro netextový obsah (obrázky, ikony, grafy) – smysluplné popisy alt, u dekorativních prvků alt="". Složitá data (infografiky) vyžadují dlouhý popis v okolním textu.
Časově založená média: titulky k videu, přepisy audia, audiopopis vizuálně důležitých dějů; synchronizace a správné označení jazyka.
Adaptovatelnost: sémantické HTML, správná hierarchie nadpisů (h2–h6), seznamy, tabulky pouze pro data, nikoli pro rozvržení; použití orientačních oblastí ARIA (header, nav, main, footer).
Rozlišitelnost: barevný kontrast textu vůči pozadí min. 4.5:1 (AA), u velkého textu 3:1; nepoužívat barvu jako jediný nositel informace; možnost vypnout animace a minimalizovat blikání (zákaz záblesků >3×/s bez kontroly bezpečnosti).
Reflow a zvětšení: obsah se musí přizpůsobit reflow (bez horizontálního posouvání) a zvětšení až na 200 % bez ztráty funkčnosti; podpora uživatelských preferencí (např. prefers-reduced-motion).

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

Klávesnice na prvním místě: vše musí být ovladatelné klávesnicí bez pasti fokusu; logické pořadí při přecházení tabulátorem; viditelný a dostatečně kontrastní stav focus.
Čas a pohyb: dostatečné časové limity, možnost zastavit/pozastavit/skrýt pohyblivý obsah; vyhnout se automatickému obnovování stránky.
Prevence záchvatů: obsah nesmí blikat, případně musí splňovat bezpečnostní metriky; animace respektují nastavení reduced motion.
Navigace: konzistentní menu, odkazy skip links k hlavnímu obsahu, mapa webu, drobečková navigace; jasné focus order v modálních oknech.
Gesta a ukazatel: cílové plochy (target size) dostatečně velké; na mobilních zařízeních alternativa ke gestům vyžadujícím přesnost; bez závislosti na síle přítlaku.
Rozšíření WCAG 2.2: Focus Appearance (viditelnost fokusu), Dragging Movements (alternativa k tažení), Target Size (Minimum) (minimální velikost klikacích prvků), Redundant Entry (nevyžadovat opakované zadávání stejné informace) a Accessible Authentication (ověřování bez kognitivní zátěže).

Srozumitelnost (Understandable): obsah a interakce musí dávat smysl

Č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é nečekané změny kontextu bez potvrzení (např. změna stránky po onchange bez tlačítka Odeslat).
Pomoc s vyplňováním: jasné štítky (label), pokyny (help text), atributy autocomplete; validace pomocí srozumitelných chyb, které lze zjistit programově; souhrn chyb nad formulářem a vazba aria-describedby.
Chyby a prevence: důležité akce (nákup, smazání) vyžadují potvrzení a možnost změn a revize; chyby nesmějí být sdělovány pouze barvou.

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í sémantika; správné 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: AA 4.5:1, velký text 3:1; cíl AAA 7:1, respektive 4.5:1 pro velký text.
Interaktivní prvky: stavy hover/focus/active musí být zřetelné; barevná informace musí být doplněna tvarem/ikonou/textem.
Grafy a mapy: vzory a symboly místo čistě barevného rozlišení; legendy přístupné čtečkám obrazovky.

Formuláře: programovatelnost a srozumitelná validace

Označení: každý input má label (nikoli placeholder jako náhradu); skupiny mají fieldset/legend.
Pomoc a nápověda: aria-describedby pro nápovědu a chybové zprávy; jasně stanovená očekávání (formát data, hesla).
Chyby: přehledný souhrn chyb, odkazy na konkrétní pole, indikace nezávislá na barvě; ověřování krok za krokem.
Automatické vyplňování: konzistentní hodnoty autocomplete pro snížení kognitivní zátěže.

Multimédia: titulky, přepisy a audiopopis

Video: přesné, synchronizované titulky; u důležitých vizuálních informací audiopopis.
Audio: přepis; ovládací prvky pro pozastavení/hlasitost dostupné z klávesnice.
Automatické přehrávání: ve výchozím nastavení vypnuto, uživatel má plnou kontrolu.

Navigační vzory a informační architektura

Orientační oblasti: header, nav, main, aside, footer pro rychlou navigaci pomocí čteček obrazovky.
Hlavičky a nadpisy: jediná logická hierarchie bez přeskakování úrovní; nadpis shrnuje obsah sekce.
Drobečková navigace: orientace v hierarchii; jednoznačné názvy odkazů (ne „Zde“).

Interakce, ovládání a fokus

Viditelný fokus: dostatečná tloušťka/kontrast; nezakrývat jej ani neschovávat pod pevně umístěné prvky.
Správa fokusu: modální okno po zavření vrací fokus na původní prvek; focus order odpovídá vizuálnímu toku.
Klávesové zkratky: zdokumentované, které nepřekážejí nativním zkratkám, s možností vypnutí/přemapování.

Responzivita, reflow a dotyk

Reflow: rozvržení bez horizontálního posouvání při šířce až 320 px; komponenty se přeskupují, nikoli skrývají klíčové funkce.
Dotykové cíle: dostatečná velikost a mezery; alternativa k drag&drop (tlačítka pro přesun).
Orientace: aplikace funguje v režimu na výšku i na šířku, pokud tomu nebrání její funkce.

Mezinárodní prostředí a jazyk

Jazyk dokumentu: lang="cs" u kořenového elementu; u cizojazyčných slov lang na úrovni vloženého prvku.
Formáty: místní formát data, času, čísel a měn; podpora RTL tam, kde je relevantní.

ARIA: kdy a jak správně

Priority: nejprve nativní HTML, teprve poté ARIA; role nesmějí odporovat sémantice elementu.
Stavy a vlastnosti: aria-expanded, aria-pressed, aria-current u navigace; živé oblasti aria-live používat s rozvahou (čtečky nepřetěžovat).
Vlastní komponenty: implementovat roving tabindex, role a klávesové vzory (např. seznamy, menu, combobox) podle WAI-ARIA Authoring Practices.

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

Automatizace: lintery a skenery (axe, pa11y, Lighthouse) – zachytí základní chyby, ale nenahrazují manuální testování.
Manuální testování: klávesnicí projít klíčové scénáře, otestovat čtečky (NVDA/JAWS/VoiceOver), mobilní čtečky a ovládání pomocí spínačů.
Uživatelské testy: se zapojením osob s postižením; ověření srozumitelnosti a mentální zátěže.
Metriky: počet blokujících problémů v jednotlivých scénářích, doba dokončení úkolu, míra chyb, pokrytí kritérií AA.

Proces a governance: jak udržet shodu

Shift-left: požadavky na a11y zahrnuté v definici hotového; designové tokeny s dostatečným kontrastem, komponenty ověřené testy a11y.
Designový systém: auditované komponenty jako jediný zdroj pravdy; zdokumentované vzory (modální okna, záložky, menu, tabulky).
CI/CD: automatické testy a11y v PR; vizuální regrese a testy kontrastu.
Role: ambasador a11y 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 alternativy – nahradit skutečným textem nebo poskytnout plnohodnotný alt/longdesc.
Placeholder jako štítek – vždy použít viditelný label; placeholder je pouze doplňková nápověda.
Nedostatečný kontrast – upravit paletu, vytvořit kontrastní varianty tokenů, testovat v tmavém i světlém režimu.
Skrytý fokus – nikdy neodstraňovat outline bez náhrady; používat designově sladěný a dostatečně viditelný fokus.
Nekonzistentní nadpisy – zachovat hierarchii bez přeskakování úrovní; každý blok má smysluplný nadpis.

Implementační checklist (úroveň AA)

Vše lze ovládat klávesnicí, fokus je zřetelný a nejsou přítomny pasti.
Kontrast textu min. 4.5:1, interaktivní stavy jsou jasně odlišené.
Textové alternativy pro všechny významové netextové prvky.
Responzivní reflow bez horizontálního posouvání, zvětšení na 200 %.
Validní HTML, sémantické strukturování, použití orientačních oblastí.
Titulky/přepisy pro multimédia; kontrola přehrávání.
Formuláře s label, nápovědou, srozumitelnými chybami a autocomplete.
Konzistentní navigace, odkazy skip links, jasné názvy odkazů.
Žádné automatické změny kontextu bez potvrzení.
Testování se čtečkami obrazovky, klávesnicí a na mobilu; audit pomocí nástrojů.

Výhled: WCAG 2.2 a cesta k WCAG 3

WCAG 2.2 klade důraz na fokus, dotykové ovládání, minimalizaci opakovaného zadávání a přístupné ověřování. Pracuje se na WCAG 3 (Silver), která by měla přinést flexibilnější model hodnocení a širší pokrytí uživatelských potřeb. Investice do sémantiky, designového systému a testovacích postupů dnes výrazně usnadní přechod na budoucí standardy.

Závěr: přístupnost jako vlastnost, nikoli doplněk

Přístupnost není jednorázový audit, ale kontinuální inženýrská praxe: začíná při návrhu, pokračuje v kódu a ověřuje se při testování i v provozu. Dodržování principů WCAG (POUR), sémantické HTML, promyšlená navigace, dostatečný kontrast, ovládání klávesnicí, kvalitní formuláře a robustní komponenty tvoří základ webu, který spolehlivě funguje pro každého uživatele – v každém kontextu.