Přístupnost webu podle WCAG: principy a normy

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 být používány osobami se zrakovým, sluchovým, pohybovým, kognitivním či jiným omezením. Standardem jsou Web Content Accessibility Guidelines (WCAG), jež stanovují 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í rozsáhlý 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.
Adaptovatelnost: sémantické HTML, správná hierarchie nadpisů (h2–h6), seznamy, tabulky použité pouze pro data, nikoli pro layout; využití ARIA landmarků (header, nav, main, footer).
Rozlišitelnost: barevný kontrast textu vůči pozadí minimálně 4.5:1 (AA), u velkého textu 3:1; barvu nepoužívat 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 musí podporovat přizpůsobení (reflow) bez horizontálního posunu a zvětšení až na 200 % bez ztráty funkčnosti; respektovat uživatelské preference (např. prefers-reduced-motion).

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

Klávesnice na prvním místě: všechno musí být ovladatelné klávesnicí bez pasti fokusu; logická posloupnost přechodu (tabbingu); viditelný a dostatečně kontrastní stav focus.
Čas a pohyb: dostatečné časové limity, možnost zastavit, pozastavit či skrýt pohyblivý obsah; vyhnout se automatickým obnovám (refreshům).
Prevence záchvatů: neblikající obsah nebo splnění bezpečnostních metrik; animace respektují nastavení reduced motion.
Navigace: konzistentní menu, skip linky k hlavnímu obsahu, sitemap, breadcrumb; jasné pořadí fokusu v modálních oknech.
Gesta a ukazatele: cílové plochy (target size) dostatečně velké; u mobilních zařízení alternativa pro gesta vyžadující 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ěření bez kognitivní zátěže).

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

Č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 odesílacího tlačítka).
Podpora vyplňování: jasné štítky (label), pokyny (help text), atributy autocomplete; validace se srozumitelnými chybami, které jsou programově zjistitelné; souhrn chyb zvýrazněný nad formulářem a vazba aria-describedby.
Chyby a prevence: důležité akce (nákup, smazání) vyžadují potvrzení, možnost úprav a revizi; chyby nesmí být signalizová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é použití role, aria-label/aria-labelledby, aria-expanded, aria-live; no ARIA is better than bad ARIA.
Komponenty: vlastní prvky (custom widgets) musí replikovat chování nativních prvků (fokus, klávesové zkratky, stavové indikátory).

Barvy, kontrast a vizuální hierarchie

Kontrast textu: AA 4.5:1, velký text 3:1; AAA cíl 7:1, resp. 4.5:1 pro velký text.
Interaktivní prvky: stavy hover/focus/active musí být zřetelné; barevná informace doplněná tvarem, ikonou nebo 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í (labeling): každý input musí mít label (nikoliv placeholder jako náhrada); skupiny pole mají fieldset a legend.
Pomoc a nápověda: aria-describedby pro hinty i chybové zprávy; jasná očekávání (formát data, heslo apod.).
Chyby: přehledný souhrn chyb, odkazy na konkrétní pole, indikace nespojená pouze s barvou; validace krok za krokem.
Automatické doplňování (autofill): konzistentní hodnoty autocomplete pro snížení kognitivní zátěže.

Multimédia: titulky, přepisy a audiopopis

Video: přesné a synchronní titulky; u důležitých vizuálních informací audiopopis.
Audio: přepisy; ovladače pro pauzu a hlasitost přístupné pomocí 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

Landmarky: header, nav, main, aside, footer pro rychlý pohyb pomocí čteček obrazovky.
Hlavičky a nadpisy: jednotná logická hierarchie bez přeskočení úrovní; nadpis jasně shrnuje obsah sekce.
Breadcrumb: pomáhá orientaci v hierarchii; jednoznačné názvy odkazů (nikoliv „Zde“).

Interakce, ovládání a fokus

Viditelný fokus: dostatečná tloušťka a kontrast; nesmí být překrytý ani skrytý pod fixními prvky.
Správa pasti fokusu (trap management): modální okno vrací fokus po uzavření na element, který měl fokus před tím; pořadí focus order odpovídá vizuálnímu toku stránky.
Klávesové zkratky: musí být dokumentované, nezasahovat do nativních zkratek, a uživatel by je měl mít možnost vypnout nebo přemapovat.

Responzivita, reflow a dotyk

Reflow: layout bez horizontálního posuvu při šířce až 320 px; komponenty se přeuspořádají, ale klíčové funkce nejsou skryty.
Dotykové cíle: dostatečně velké s přiměřenými mezerami; alternativa k drag & drop (např. tlačítka pro přesun).
Orientace: aplikace funguje v režimu na výšku i na šířku, pokud to neomezuje její funkčnost.

Mezinárodní prostředí a jazyk

Jazyk dokumentu: lang="cs" u kořenového elementu; u cizích slov nebo pasáží nastavení lang na inline úrovni.
Formáty: lokální nastavení data, času, čísel a měn; podpora směru zápisů zprava doleva (RTL), pokud je relevantní.

ARIA: kdy a jak správně

Priority: nejprve využít nativní HTML, až poté ARIA; role nesmí být protichůdné vůči sémantice elementu.
Stavy a atributy: aria-expanded, aria-pressed, aria-current u navigačních prvků; inteligentní používání aria-live, vyvarovat se zahlcení čteček.
Vlastní komponenty: implementovat roving tabindex, správné role, klávesové vzory podle WAI-ARIA Authoring Practices (např. seznamy, menu, comboboxy).

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

Automatizace: lintery a nástroje pro skenování (axe, pa11y, Lighthouse) – detekují základní chyby, ale nenahrazují manuální testování.
Manuální testování: kontrola klíčových postupů pomocí klávesnice, testování s čtečkami NVDA, JAWS, VoiceOver, mobilní čtečky a ovládání switchem.
Uživatelské testy: zapojení osob se zdravotním postižením; ověření srozumitelnosti a mentální zátěže.
Metriky: počet zásadních problémů v klíčových scénářích, doba potřebná k dokončení úkolu, míra chybovosti, pokrytí kritérií na úrovni AA.

Proces a řízení: jak udržet shodu

Shift-left: požadavky na přístupnost začleněné již do definice hotového; design tokeny s kontrastem, komponenty ověřené testy přístupnosti.
Design systém: ověřené komponenty jako jediný zdroj pravdy; dokumentované vzory (modální okna, záložky, menu, tabulky).
CI/CD: automatické testy přístupnosti v pull requestech; vizuální regresní a kontrastní testy.
Role: odborník na přístupnost (a11y champion) v týmu, pravidelné revize, školení designérů a vývojářů.

Časté nedostatky a jejich odstranění

Text v obrázcích bez alternativ – nahradit skutečným textem nebo poskytnout plnohodnotný alt či dlouhý popis (longdesc).
Placeholder jako náhrada labelu – 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 tokenů, testovat i v tmavém režimu.
Skrytí fokusu – nikdy neodstraňovat obrys fokusu bez adekvátní náhrady; používat vizuálně sladěný a dostatečně viditelný fokus.
Nekonzistentní nadpisy – udržovat hierarchii bez skoků; každý blok by měl mít smysluplný nadpis.