Přístupnost webu podle WCAG - Kompletní průvodce

Přístupnost se netýká jen „lidí s postižením". Týká se nás všech. Dočasné zranění ruky vám znemožní používat myš. Silné sluneční světlo dělá obrazovku nečitelnou. Stárnete a zrak slábne. Hlučné prostředí brání slyšet video. Situační postižení zažívá každý. Navíc mnoho opatření pro přístupnost zlepšuje zážitek všem uživatelům: lepší kontrast je čitelnější pro každého, titulky u videa pomáhají lidem v tichém prostředí, klávesová navigace je rychlejší pro power users. Přístupný web je prostě lepší web.

Přístupnost má měřitelné obchodní přínosy. Rozšíříte své publikum o miliony potenciálních zákazníků. Zlepšíte SEO – Google oceňuje sémantický kód, alternativní texty a dobrou strukturu, což jsou základní principy přístupnosti. Snížíte Bounce Rate díky lepší použitelnosti. Budujete pozitivní image firmy, která dbá na inkluzi. A předejdete právním problémům – legislativa se zpřísňuje a nepřístupný web může znamenat pokuty nebo žaloby.

Zajímavé je, že přístupnost a SEO sdílejí mnoho principů. Alternativní texty obrázků pomáhají nevidomým, ale také vyhledávačům pochopit obsah obrázku. Správná hierarchie nadpisů pomáhá uživatelům čteček orientovat se, ale také Googlu rozumět struktuře obsahu. Sémantické HTML je základ přístupnosti i SEO. Investice do přístupnosti se tedy vrací i v lepších pozicích ve vyhledávání.

Zákon vstoupil v platnost 1. června 2019 a ukládá povinnost zajistit přístupnost internetových stránek a mobilních aplikací orgánům veřejné moci. To zahrnuje ministerstva, úřady, kraje, obce, státní příspěvkové organizace, školy, vysoké školy, nemocnice a další. Požadovaný standard je WCAG 2.1 úroveň AA. Organizace musí také zveřejnit Prohlášení o přístupnosti a nabídnout mechanismus zpětné vazby pro hlášení problémů.

Zákon se primárně vztahuje na veřejný sektor: orgány státní správy a samosprávy, školy a univerzity, zdravotnická zařízení, kulturní instituce, dopravní podniky. Soukromé firmy zatím přímou zákonnou povinnost nemají, ale situace se mění. European Accessibility Act (EAA) vstoupí v plnou účinnost v roce 2025 a rozšíří požadavky na e-shopy, banky, telekomunikace a další služby. Investice do přístupnosti dnes vás připraví na budoucí požadavky.

Porušení zákona může vést k pokutám až do výše 500 000 Kč. Kontrolu provádí Ministerstvo vnitra, které může vyžadovat nápravu a ukládat sankce. Kromě finančních sankcí hrozí reputační škody – nepřístupný web veřejné instituce může být medializován a poškodit důvěru občanů. Pro soukromé firmy sice pokuty zatím nehrozí, ale soudní spory ano – v zahraničí již byly firmy žalovány za nepřístupné weby.

Povinné organizace musí na svém webu zveřejnit Prohlášení o přístupnosti. Toto prohlášení musí obsahovat: míru souladu s WCAG standardy (úplný, částečný nebo nesoulad), seznam známých bariér a plán jejich odstranění, kontakt pro hlášení problémů, datum poslední aktualizace. Prohlášení musí být snadno dostupné – typicky odkaz v patičce každé stránky. Šablonu prohlášení najdete na gov.cz.

Obsah musí být vnímatelný všemi smysly, které má uživatel k dispozici. Pokud je někdo nevidomý, nemůže vnímat obrázky – proto potřebuje textovou alternativu (alt text). Pokud je někdo neslyšící, nemůže vnímat zvuk ve videu – proto potřebuje titulky. Konkrétní požadavky zahrnují: alternativní texty pro obrázky, titulky a přepisy pro audio/video, dostatečný kontrast mezi textem a pozadím (min. 4,5:1), možnost zvětšit text bez ztráty funkčnosti.

Web musí být ovladatelný různými způsoby, nejen myší. Lidé s motorickým postižením často používají pouze klávesnici nebo speciální vstupní zařízení. Požadavky zahrnují: veškerá funkčnost dostupná přes klávesnici (Tab, Enter, šipky), viditelné označení zaměření (focus) u interaktivních prvků, dostatek času na dokončení akcí (žádné automatické timeout bez varování), žádný obsah způsobující záchvaty (blikání rychlejší než 3x za sekundu). WCAG 2.2 přidává požadavek na minimální velikost klikacích oblastí (24x24 px).

Informace a ovládání webu musí být jasné a předvídatelné. Požadavky zahrnují: jazyk stránky je definovaný pomocí <html lang="cs">, navigace je konzistentní napříč webem, formuláře mají jasné popisky a chybové zprávy, stránka se nechová neočekávaně (např. automatické přesměrování bez varování). Lidé s kognitivními poruchami nebo nedostatečnou znalostí jazyka potřebují jasnou a jednoduchou komunikaci.

Obsah musí být interpretovatelný širokým spektrem technologií, včetně asistenčních. To vyžaduje: validní HTML kód bez chyb, správné použití sémantických elementů, ARIA atributy pro dynamický obsah, kompatibilitu s čtečkami obrazovky a dalšími asistenčními technologiemi. Robustní web funguje správně dnes i v budoucnosti s novými technologiemi.

WCAG definuje tři úrovně souladu. Úroveň A je minimální – pokud ji nesplníte, web je prakticky nepoužitelný pro lidi s postižením. Úroveň AA je doporučený a legislativně vyžadovaný standard – zajišťuje skutečnou použitelnost. Úroveň AAA je nejvyšší, ale není realistické ji dosáhnout na celém webu. Cílem většiny organizací je úroveň AA, která zahrnuje požadavky jako kontrast 4,5:1, možnost zvětšení textu na 200 % a viditelný focus.

Alternativní text (alt) popisuje obsah obrázku pro nevidomé uživatele. Chybějící alt je nejčastější problém – čtečka obrazovky pak přečte název souboru („IMG_3847.jpg"), což je k ničemu. Špatný alt je příliš vágní („obrázek") nebo obsahuje keyword stuffing. Řešení: Každý informativní obrázek má popisný alt text vysvětlující, co obrázek zobrazuje. Dekorativní obrázky mají alt="" (prázdný alt), aby je čtečka přeskočila.

Nízký kontrast mezi textem a pozadím činí text nečitelným pro slabozraké. WCAG vyžaduje minimální kontrast 4,5:1 pro běžný text a 3:1 pro velký text (18+ bodů). Světle šedý text na bílém pozadí tento požadavek nesplňuje. Řešení: Použijte nástroje jako WebAIM Contrast Checker k ověření kontrastních poměrů a upravte barevnou paletu.

Mnoho webů lze ovládat pouze myší. To vylučuje lidi s motorickým postižením. Focus není viditelný – uživatel neví, kde na stránce je. Focus trap – uživatel uvízne v modálním okně a nemůže se dostat ven. Řešení: Testujte web pouze klávesnicí (Tab, Enter, Escape). Zajistěte viditelný focus indicator u všech interaktivních prvků. Nikdy neodstraňujte outline pomocí CSS bez náhrady.

Formuláře často používají placeholder jako jediný popisek – ten zmizí po začátku psaní. Popisky nejsou programově spojené s poli. Chybové zprávy jsou nejasné nebo nepřístupné. Řešení: Každé pole má <label> explicitně spojený pomocí for/id. Chybové zprávy jsou konkrétní a spojené s polem pomocí aria-describedby.

Nadpisy (<h1>–<h6>) jsou navigačními body pro čtečky obrazovky. Přeskakování úrovní (z H1 na H3) nebo používání nadpisů jen pro vizuální efekt mate uživatele. Řešení: Jeden <h1> na stránce, logická hierarchie (H1 → H2 → H3), nepřeskakujte úrovně. Nadpisy používejte pro strukturu, ne pro velikost písma.

Uživatelé čteček obrazovky často procházejí seznam odkazů izolovaně. Když slyší „klikněte zde, klikněte zde, klikněte zde", nevědí, kam odkazy vedou. Řešení: Text odkazu je popisný sám o sobě. Místo „Klikněte zde" napište „Stáhněte si náš ceník" nebo „Přečtěte si článek o SEO".

Neslyšící uživatelé potřebují titulky pro pochopení mluveného obsahu. Automatické titulky nejsou dostatečně přesné. Řešení: Poskytněte kvalitní synchronizované titulky ručně upravené. Pro důležitá videa přidejte také textový přepis (transkript).

Bez atributu lang čtečka obrazovky neví, jakou výslovnost použít. Český text čtený s anglickou výslovností je nesrozumitelný. Řešení: Přidejte <html lang="cs">. Části v jiném jazyce označte <span lang="en">.

WAVE (wave.webaim.org) – vizuálně označí chyby přímo na stránce. Má rozšíření pro prohlížeč. axe DevTools – rozšíření pro Chrome/Firefox integrované do DevTools, poskytuje detailní analýzu. Lighthouse – vestavěný v Chrome DevTools, testuje přístupnost spolu s výkonem a SEO. Pa11y – nástroj pro příkazovou řádku, vhodný pro automatizaci v CI/CD. Tyto nástroje jsou dobrým začátkem, ale nezachytí vše.

Projděte celý web pouze pomocí klávesnice (bez myši). Používejte: Tab pro přechod mezi prvky, Enter/Space pro aktivaci, Escape pro zavření modálů, šipky pro navigaci v menu. Ptejte se: Je focus viditelný? Mohu vyplnit formulář? Mohu zavřít popup? Nedostanu se do pasti? Toto manuální testování odhalí problémy, které nástroje nezachytí.

Vyzkoušejte váš web se čtečkou obrazovky. NVDA (Windows, zdarma) a JAWS (Windows, placený) jsou nejrozšířenější. VoiceOver (macOS/iOS, vestavěný) a TalkBack (Android, vestavěný). Zapněte čtečku, zavřete oči a zkuste: Rozumím obsahu? Vím, kde jsem? Mohu dokončit klíčové akce? Toto je nejhodnotnější test, který odhalí skutečné problémy uživatelů.

Použijte WebAIM Contrast Checker k ověření kontrastních poměrů. Zadejte barvu textu a pozadí (hex kódy) a nástroj vám řekne, zda splňujete WCAG úrovně. Nástroj Coblis simuluje různé typy barvosleposti – ověřte, že váš web je čitelný i pro barvoslepé.

Zlatým standardem je testování se skutečnými uživateli. Najměte testery s různými typy postižení (nevidomí, slabozrací, motorické postižení) a nechte je projít klíčové scénáře na vašem webu. Sledujte, kde narážejí na překážky. Jejich zpětná vazba je nejcennější informací pro zlepšení přístupnosti. Organizace jako Fable nebo AbilityNet nabízejí testování s uživateli jako službu.

☑ Jeden <h1> na stránce, logická hierarchie nadpisů
☑ Používejte sémantické HTML5 elementy (<header>, <nav>, <main>, <footer>)
☑ Jazyk stránky definovaný: <html lang="cs">
☑ Části v jiném jazyce označené: <span lang="en">

☑ Informativní obrázky mají popisný alt text
☑ Dekorativní obrázky mají alt=""
☑ Videa mají synchronizované titulky
☑ Žádné automatické přehrávání zvuku déle než 3 sekundy

☑ Kontrast textu a pozadí minimálně 4,5:1
☑ Informace není sdělena pouze barvou (použijte i ikony, text)
☑ Odkazy se vizuálně odlišují od běžného textu

☑ Vše dostupné pomocí klávesnice (Tab, Enter, Escape)
☑ Focus je viditelně zvýrazněný
☑ Logické pořadí procházení (tab order)
☑ Žádné focus traps (kromě modálních oken)

☑ Každé pole má explicitní <label> (for/id)
☑ Chybové zprávy jsou jasné a spojené s polem
☑ Povinná pole označena vizuálně i programově
☑ Formulář lze vyplnit pouze klávesnicí

☑ Text odkazu je popisný sám o sobě
☑ Skip link umožňuje přeskočit navigaci
☑ Aktivní stránka označena (aria-current="page")
☑ Breadcrumb navigace má správnou strukturu

☑ Web plně funkční na mobilech
☑ Tlačítka mají minimální velikost 44x44 px
☑ Text lze zvětšit na 200 % bez ztráty funkčnosti
☑ Orientace obrazovky není vynucována

Použijte element <nav> pro navigační oblasti. Přidejte aria-label pro rozlišení více navigací („Hlavní navigace", „Patička"). Dropdown menu musí být ovladatelné klávesnicí – šipky pro pohyb, Enter pro výběr, Escape pro zavření. Použijte aria-expanded pro indikaci stavu. Aktivní stránka je označena aria-current="page". Na začátek stránky přidejte skip link pro přeskočení navigace.

Každé pole má <label> spojený pomocí for a id. Nepoužívejte placeholder jako náhradu labelu. Chybové zprávy jsou konkrétní („Email musí obsahovat @") a spojené s polem pomocí aria-describedby. Pole s chybou má aria-invalid="true". Po odeslání informujte uživatele o výsledku pomocí aria-live regionu. Povinná pole označte required nebo aria-required="true".

Modální okna musí mít role="dialog" a aria-modal="true". Focus trap – focus je uzamčen uvnitř modálu, dokud není zavřen. Zavření pomocí Escape klávesy. Po zavření se focus vrací na prvek, který modál otevřel. Přidejte aria-labelledby odkazující na nadpis modálu. Pozadí za modálem by mělo mít aria-hidden="true".

Tlačítko pro rozbalení má aria-expanded="true/false" podle stavu. aria-controls odkazuje na ID rozbalitelného obsahu. Ikona šipky je dekorativní – má aria-hidden="true". Klávesová navigace: Enter/Space přepíná stav, šipky pro pohyb mezi položkami (volitelné). Změna stavu je okamžitě oznámena asistenčním technologiím díky aria-expanded.

Datové tabulky mají <caption> vysvětlující obsah. Používejte <th> pro záhlaví s atributem scope="col" nebo scope="row". Pro komplexní tabulky použijte id a headers atributy pro explicitní asociaci. Nepoužívejte tabulky pro layout – jen pro skutečná tabulková data. Čtečky obrazovky pak mohou správně navigovat mezi buňkami a oznámit záhlaví.

Náklady závisí na tom, zda stavíte nový web nebo opravujete stávající. U nového webu přístupnost zvyšuje náklady jen o 10–15 %, pokud je zahrnuta od začátku. U stávajícího webu záleží na míře problémů. Audit přístupnosti stojí 5–20 tisíc Kč. Následná implementace 30–100 tisíc Kč podle rozsahu. Nejdražší je přepracování zastaralého kódu nebo vizuálních builderů.

Více než milion Čechů má nějakou formu postižení. Pokud váš web není přístupný, vylučujete 10 % populace. Pro e-shop s měsíčním obratem 500 000 Kč to může znamenat ztrátu 50 000 Kč měsíčně. Studie ukazují, že 71 % lidí s postižením opustí nepřístupný web – a jdou ke konkurenci.

Přístupnost a SEO sdílejí principy. Alt texty, sémantické HTML, správná hierarchie nadpisů – to vše zlepšuje pozice ve vyhledávání. Studie ukazují, že přístupné weby mají v průměru o 12 % vyšší organickou návštěvnost. To jsou zákazníci, za které neplatíte v reklamě.

Pro povinné organizace je nesplnění zákona rizikem pokut až 500 000 Kč. Pro soukromé firmy legislativa přichází s EAA v roce 2025. Investice do přístupnosti dnes předchází problémům zítra. Navíc v zahraničí rostou soudní spory kvůli nepřístupným webům – prevence je levnější než právní spory.

Uvažujme e-shop s obratem 500 000 Kč měsíčně. Investice do přístupnosti: 80 000 Kč. Přínosy: rozšíření publika o 5 % (+25 000 Kč), lepší SEO (+10 000 Kč), vyšší konverze díky lepší použitelnosti (+15 000 Kč). Měsíční přínos: 50 000 Kč. Návratnost investice: 1,6 měsíce. Po této době je přístupnost čistý zisk.