Přístupnost podle WCAG

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 technologii. 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 k dispozici smyslům

• Textové alternativy pro netextový obsah (obrázky, ikony, grafy) – smysluplné alt popisy, u dekorativních alt="". Složitá data (infografiky) vyžadují dlouhý popis v okolním textu.
• Časově založená 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.
• Adaptovatelnost: sémantické HTML, správná hierarchie nadpisů (h2–h6), seznamy, tabulky jen pro data, nikoli layout; použití ARIA landmarků (header, nav, main, footer).
• Rozlišitelnost: barevný kontrast textu vůči pozadí min. 4.5:1 (AA), u velkého textu 3:1; nevyužívat barvu jako jediný nosič 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 scrollu) a zvětšení až na 200 % bez ztráty funkcionality; podpora preferencí uživatele (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á posloupnost tabbingu; viditelný a dostatečně kontrastní focus stav.
• Čas a pohyb: dostatečné časové limity, možnost zastavit/pauznout/skrýt pohyblivý obsah; vyhnout se automatickým refreshům.
• Prevence záchvatů: neblikající obsah nebo splnění bezpečnostních metrik; animace respektují reduced motion.
• Navigace: konzistentní menu, skip links k hlavnímu obsahu, sitemapa, breadcrumb; jasné focus order v modálních oknech.
• Gest a ukazatel: cílové plochy (target size) dostatečně velké; u mobilu alternativa pro gesta vyžadující přesnost; bez závislosti na síle přítlaku.
• WCAG 2.2 rozšíření: 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ěření 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), autocomplete atributy; validace srozumitelnými chybami, které jsou programově zjistitelné; souhrn chyb nad formulářem a vazba aria-describedby.
• Chyby a prevence: důležité akce (nákup, smazání) vyžadují potvrzení, možnost změn a revizi; chyby nesmí být komuniková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 jen 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í napodobit chování nativních (fokus, klávesové zkratky, stavy).

Barvy, kontrast a vizuální hierarchie

• Kontrast textu: AA 4.5:1, velký text 3:1; AAA cíl 7:1, respektive 4.5:1 pro velký text.
• Interaktivní prvky: stav hover/focus/active musí být zřetelný; barevná informace doplněná tvarem/ikonou/textem.
• Grafy a mapy: vzory a symboly místo čistě barevného rozlišení; legendy přístupné čtečkám.

Formuláře: programovatelnost a srozumitelná validace

• Labeling: každý input má label (ne placeholder jako náhradu); skupiny mají fieldset/legend.
• Pomoc a nápověda: aria-describedby pro hinty a chybové zprávy; jasná očekávání (formát data, hesla).
• Chyby: přehledný souhrn chyb, linky na konkrétní pole, non-color indikace; ověřování krok za krokem.
• Autofill: konzistentní autocomplete hodnoty pro snížení kognitivní zátěže.

Multimédia: titulky, přepisy a audiopopis

• Video: přesné, synchronní titulky; u důležitých vizuálních informací audiopopis.
• Audio: přepis; ovladače pro pauzu/hlasitosť dostupné klávesnicí.
• Automatické přehrávání: defaultně vypnuto, uživatel má plnou kontrolu.

Navigační vzory a informační architektura

• Landmarky: header, nav, main, aside, footer pro rychlý pohyb čtečkami.
• Hlavičky a nadpisy: jediná logická hierarchie bez skoků; nadpis shrnuje obsah sekce.
• Breadcrumb: orientace v hierarchii; jednoznačné názvy odkazů (ne „Zde“).

Interakce, ovládání a fokus

• Viditelný fokus: dostatečná tloušťka/kontrast; nepřekrývat ani neschovávat pod fixed prvky.
• Trap management: modální okno vrací fokus po zavření na původní prvek; focus order odpovídá vizuálnímu toku.
• Klávesové zkratky: dokumentované, nepřekážející nativním, možnost vypnout/přemapovat.

Responzivita, reflow a dotyk

• Reflow: layout bez horizontálního scrollu při šířce až 320 px; komponenty se přeskupí, ne 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 portrétu i landscape, pokud to nebrání funkci.

Mezinárodní prostředí a jazyk

• Jazyk dokumentu: lang="cs" u kořenového elementu; pro cizí slova lang na inline úrovni.
• Formáty: lokální datum, čas, čísla, měny; podpora RTL kde relevantní.

ARIA: kdy a jak správně

• Priority: nejprve nativní HTML, až poté ARIA; role nesmí odporovat sémantice elementu.
• Stavy a vlastnosti: aria-expanded, aria-pressed, aria-current u navigace; živé oblasti aria-live rozumně (ne zahlcovat čtečky).
• Vlastní komponenty: implementovat roving tabindex, role, klávesové vzory (např. seznamy, menu, combobox) dle 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í test.
• Manuální test: klávesnicí projít klíčové toky, čtečky (NVDA/JAWS/VoiceOver), mobilní čtečky a switch ovládání.
• Uživatelské testy: se zapojením osob s postižením; validace srozumitelnosti a mentální zátěže.
• Metriky: počet blokujících problémů na tok, čas dokončení úkolu, míra chyb, pokrytí kritérií AA.

Proces a governance: jak udržet shodu

• Shift-left: a11y požadavky v definici hotového; design tokeny s kontrastem, komponenty validované a11y testy.
• Design systém: auditované komponenty jako jediný zdroj pravdy; dokumentované vzory (modály, taby, menu, tabulky).
• CI/CD: automatické a11y testy v PR; vizuální regrese a kontrastní testy.
• Role: 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 poskytnout plnohodnotný alt/longdesc.
• Placeholder jako label – vždy použít viditelné label; placeholder je jen doplňkový hint.
• Nevyhovující kontrast – upravit paletu, vytvořit kontrastní varianty tokenů, testovat v tmavém i světlém režimu.
• Skrytí fokusu – nikdy neodstraňovat outline bez náhrady; používat designově sladěný a dostatečně viditelný fokus.
• Nekonzistentní nadpisy – udržet hierarchii bez skoků; každý blok má smysluplný nadpis.

Implementační checklist (úroveň AA)

• Vše ovladatelné klávesnicí, zřetelný fokus, žádné pasti.
• Kontrast textu min. 4.5:1, interaktivní stavy jasně odlišené.
• Textové alternativy pro všechny netextové prvky s významem.
• Responzivní reflow bez horizontálního scrollu, zoom 200 %.
• Validní HTML, sémantické strukturování, použití landmarků.
• Titulky/přepisy pro multimédia; kontrola přehrávání.
• Formuláře s label, hinty, srozumitelnými chybami a autocomplete.
• Konzistentní navigace, skip linky, jasné názvy odkazů.
• Žádné automatické změny kontextu bez potvrzení.
• Testy s čtečkami, klávesnicí a na mobilu; audit nástrojů.

Výhled: WCAG 2.2 a cesta k WCAG 3

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

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

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