Přístupnost

Tým nasadí na web overlay widget, ten slibuje „jeden řádek kódu a jste v souladu", a k tomu axe skener projde na zeleno. Pocit hotovo. Pak přijde uživatel s čtečkou obrazovky, dojede tabulátorem k modálnímu oknu a tam uvízne. Fokus se z modálu nedostane ven, čtečka čte název souboru místo popisu, a tlačítko „odeslat" je <div>, na který se klávesnicí nedá dostat. Skener tyhle věci neviděl. Widget je nespravil.

Ta scénka boří rovnou dva nejčastější mýty. Overlay neopravuje podkladový kód. A automatický skener vidí jen část problémů. Přístupnost není nálepka, kterou na hotový web přilepíš. Je to kvalita obsahu a rozhraní. Jednovětou definici pojmů jako WCAG nebo POUR drží společný slovník, tady je rozvádíme do postupu a uzavíráme právním koncem řetězu, stejně jako sesterská kapitola o právu, soukromí a souhlasu.

POUR jako čtyři otázky, ne checklist

WCAG stojí na čtyřech principech, zkratka POUR. Není to seznam k odškrtání, jsou to čtyři otázky, které si nad každým prvkem položíš.

Perceivable, vnímatelnost. Dostane se obsah ke smyslům uživatele i jinou cestou než tou výchozí? Obrázek má textovou alternativu, video titulky, text dostatečný kontrast. Když to nevidím nebo neslyším, musí to jít vnímat jinak.

Operable, ovladatelnost. Dá se rozhraní ovládat i bez myši? Všechno klikací musí jít obsloužit klávesnicí, fokus musí být vidět a logicky postupovat. Když potřebuju táhnout, musí existovat i varianta jedním klikem.

Understandable, srozumitelnost. Pochopí uživatel, co se děje a co má dělat? Předvídatelná navigace, jasné popisky, srozumitelné chybové hlášky. Tahle vrstva se potkává s informační architekturou: breadcrumb, skip-navigace a srozumitelné popisky, které GOV.UK testovala i s lidmi s kognitivními potřebami, jsou přístupnostní prvky.

Robust, robustnost. Přečte obsah i stroj, který neznám? Validní sémantické HTML, na které navazuje čtečka, hlasový asistent nebo zítřejší technologie. Tahle otázka je důvod, proč sémantika není kosmetika.

WCAG 2.2 (W3C Recommendation z 5. října 2023) tyhle čtyři principy rozpadá do 13 guidelines a měří je třemi úrovněmi shody: A, AA, AAA. Cíl pro běžný web je AA. Ne AAA. AAA má požadavky jako kontrast 7:1, které jsou na obsahový web často nepraktické, a hlavně je to úroveň, kterou po vás nikdo nevyžaduje. AA je to, co chce evropská norma i zákon, ke kterým se kapitola dostane na konci.

Sémantika je předpoklad, ne ozdoba

Robustnost stojí na tom, že HTML říká, čím prvky jsou. Nadpis je <h1> až <h6>, tlačítko je <button>, odkaz je <a>. Čtečka z téhle struktury staví navigaci: uživatel skáče po nadpisech jako po obsahu, vyvolá seznam odkazů, pozná formulářové pole. Když je tlačítko nastylovaný <div>, čtečka neví, že je to tlačítko, a klávesnice se na něj nedostane.

Tady přístupnost ústí přímo do obsahového modelu. Sémantické části místo jednoho bloku jsou předpoklad přístupnosti a alt je strukturované pole, ne dodatečná vrstva. Nadpisy nesmí přeskakovat úrovně, z <h2> se neskáče rovnou na <h4>. Přeskočená úroveň nadpisu je podle WebAIM Million chyba na 41,8 % stránek. A je to současně signál pro SEO, čtečka i Googlebot čtou tutéž strukturu.

Klávesnice a fokus

Test, který nic nestojí: odlož myš a projdi web tabulátorem. Dostaneš se na každý odkaz, tlačítko a pole? Vidíš, kde právě jsi? Postupuje fokus v pořadí, které dává smysl? Když ano, máš pokrytou velkou část ovladatelnosti.

WCAG 2.2 přidalo k fokusu nová kritéria. 2.4.11 Focus Not Obscured říká, že prvek s fokusem nesmí být schovaný za jiným prvkem, typicky za sticky hlavičkou nebo cookie bannerem. 2.4.13 Focus Appearance (AAA) chce indikátor fokusu silný aspoň jako 2px rámeček s kontrastem 3:1 vůči okolí. Časté zlo je outline: none v CSS, který viditelný fokus prostě zruší, aby „nerušil design". Tím se web stane neovladatelný pro každého, kdo nepoužívá myš.

Dvě další kritéria 2.2 míří na dotyk a mobil. 2.5.7 Dragging Movements (AA) vyžaduje, aby každá akce typu „táhni" měla alternativu jedním klikem nebo tapem. A 2.5.8 Target Size (AA) chce klikací cíl minimálně 24×24 CSS px, s výjimkou prvků, které mají kolem sebe dost odstupu. Malá ikonka křížku natěsnaná k jiné ikonce tohle nesplní.

Kontrast jsou čísla, ne pocit

Nejčastější chyba na webu vůbec je nízký kontrast textu. WebAIM Million 2026 ho našla na 83,9 % auditovaných úvodních stránek. Není to vágní „světle šedá na bílé vypadá líp", jsou to konkrétní poměry, které se dají změřit.

Co	AA	AAA
Běžný text	4.5:1	7:1
Velký text (≥ 24px, nebo ≥ 18.66px bold)	3:1	4.5:1
Netextové prvky (ikony, hranice inputů, grafika)	3:1	—

Pro AA tedy běžný text potřebuje aspoň 4.5:1, velký text 3:1. A pozor na poslední řádek, který se přehlíží. Kontrast 3:1 platí i pro netextové prvky. Hranice formulářového pole, ikona, stavová barva, ty musí být vidět taky, jinak uživatel nepozná, kde má psát. Měří se to nástrojem, ne okem.

Alt text: kontext, ne obrázek

Alt text už podrobně rozvádí kapitola o médiích a podkladech, včetně alt Decision Tree, takže ho tady neopisujeme. Stačí princip a tři pasti.

Alt popisuje funkci v kontextu, ne vzhled obrázku. Logo v hlavičce, které je odkazem na úvod, má alt="Přejít na hlavní stránku", ne „Logo XY". Ikona lupy v hledání má alt="Hledat", ne „lupa". Dekorativní obrázek, který nic nesděluje, dostane prázdné alt="", aby ho čtečka přeskočila. A alt="" není totéž jako chybějící atribut: bez alt čtečka často přečte název souboru. Chybějící alt našla WebAIM Million na 53,1 % stránek, a u velké části jde o obrázky, které jsou odkazem, takže výsledkem je rozbitá navigace pro čtečku. Tohle spadá pod WCAG 1.1.1, úroveň A, tedy úplný základ.

Automat vidí 40 %, čtečka 100 %

Tohle je jádro testovací strategie a zároveň konec mýtu „skener prošel, jsme přístupní". Automatické nástroje pokryjí jen zhruba 30 až 40 % kritérií. Najdou chybějící alt, špatný kontrast, nevalidní HTML, chybějící labely. To je užitečné a levné. Ale 60 až 70 % se automatem chytit nedá. Jestli má alt smysl, jestli nadpisy dávají logickou strukturu, jestli fokus postupuje rozumně, jestli se web dá doopravdy ovládat klávesnicí a jestli je obsah srozumitelný.

Že automat nestačí, ukazuje WebAIM Million 2026 v jednom čísle: i přes dostupné skenery mělo 95,9 % úvodních stránek detekovatelné WCAG selhání, průměrně 56,1 chyby na stránku. A to jsou jen ty chyby, které automat vidí. Reálné číslo je vyšší.

Testování má proto vrstvy. Automat běží v CI/CD jako kontrola kvality vedle Lighthouse, hlídá regrese a na úrovni error blokuje merge. To je levná pojistka proti tomu, aby se opravená věc znovu rozbila. Manuální test plus čtečka (NVDA, JAWS, VoiceOver) řeší smysl a ovladatelnost, tedy tu většinu, kterou automat nevidí. A přístupnost není jednorázovka před spuštěním: re-audit patří mezi průběžné úkoly správy a údržby, protože každá nová funkce umí bariéru vrátit.

Overlay widget není řešení

Mýtus „nasadíme overlay a je to vyřešené" je nejsilnější a nejdražší ze všech. Overlay je JavaScript, který se snaží přístupnost dolepit zvenčí za běhu stránky. Neopravuje podkladový kód, a často aktivně škodí: koliduje s čtečkou, kterou už uživatel má, a rozbíjí navigaci.

Čísla jsou jednoznačná. FTC v roce 2025 uložila firmě AccessiBe pokutu 1 milion dolarů za klamavou reklamu kolem automatické nápravy přístupnosti. Národní federace nevidomých označila overlaye za „škodlivé". A weby, které overlay nasadily, byly přesto žalovány, 800+ případů. Widget nebyl účinná obrana. Když si máš odnést jednu větu: overlay je marketing, ne náprava.

Curb cut: děláš to pro všechny

Než někdo namítne „to je charita pro pár lidí, zbytečnost pro náš web", obrať to. Funkce dělané pro lidi s postižením používá nakonec každý. Říká se tomu curb cut effect, podle obrubníkových nájezdů, které měly pomoct vozíčkářům a používá je každý s kočárkem, kufrem nebo nákupem. Titulky čtou lidé v hlučném baru i v tiché kanceláři bez sluchátek. Klávesnicovou ovladatelnost milují pokročilí uživatelé. Dobrý kontrast zachrání čitelnost na mobilu na přímém slunci.

A není to malá skupina. Podle WHO žije se závažným postižením asi 1,3 miliardy lidí, 16 % populace. Přesah se SEO taky není náhoda. Sémantické nadpisy a alt text jsou sdílený signál pro čtečku i pro Google. Přístupné je lépe indexovatelné. Přístupnost není daň navíc, je to UX pro širší publikum.

Není to zbytečné pro malý web?

„Čtečka, manuální audit, accessibility statement, to je aparát pro korporát, my máme pětistránkovou vizitku." Zčásti to sedí. Plný audit s NVDA na pět stránek nemusíš dělat každý týden a část právních povinností tě jako mikropodnik mine.

Co se neškáluje dolů, jsou otázky. Projdu web tabulátorem od shora dolů? Má text kontrast aspoň 4.5:1? Má každý obrázek smysluplný alt, nebo dekorativní alt=""? Jsou nadpisy <h1>–<h6> v logickém pořadí a tlačítka opravdu <button>? Tyhle platí pro vizitku stejně jako pro velký web a většinu zvládneš sám za odpoledne. Inventuru toho, co web reálně obsahuje, odhalí už discovery, a nepřístupné UI je legitimní důvod redesignu. A cookie banner z právní kapitoly musí být sám přístupný, tedy ovladatelný klávesnicí a s dostatečným kontrastem. Tady se obě kapitoly o souladu s pravidly potkávají. Škáluje se aparát, ne otázka.

Praktický checklist

• POUR jako čtyři otázky nad každým prvkem: vnímám, ovládám, rozumím, přečte to stroj.
• Cílem je WCAG 2.2 úroveň AA (to chce EN 301 549 a EAA), ne AAA.
• Sémantické HTML: nadpisy <h1>–<h6> bez přeskoků, tlačítka <button>, odkazy <a>.
• Celý web projde tabulátorem; fokus je vidět (žádné outline: none) a postupuje logicky.
• Kontrast textu aspoň 4.5:1 (velký text 3:1), netextové prvky 3:1, měřeno nástrojem.
• Klikací cíle aspoň 24×24 px; akce „táhni" mají alternativu jedním klikem.
• Alt text podle funkce v kontextu; dekorativní alt="", nikdy chybějící atribut.
• Automat běží v CI jako brána proti regresím; smysl a ovladatelnost testuje člověk s čtečkou.
• Re-audit je průběžný, ne jednorázový před spuštěním.
• Tam, kde to zákon žádá, existuje accessibility statement a mechanismus pro nahlášení bariéry.

Typické chyby

• Overlay widget jako řešení. Neopravuje kód, často škodí; FTC pokuta 1 mil. USD, 800+ žalob webů s overlayem.
• „Skener prošel, jsme přístupní." Automat pokryje 30–40 %; smysl altu, logika fokusu a ovladatelnost jsou manuální.
• AAA jako cíl. Pro běžný web nepraktické; vyžaduje se AA.
• outline: none. Zruší viditelný fokus a znepřístupní web pro klávesnici.
• Nízký kontrast. Nejčastější chyba na webu, 83,9 % stránek; je to měřitelné číslo, ne vkus.
• Chybějící alt místo alt="". Čtečka přečte název souboru, hlavně u obrázků-odkazů to rozbíjí navigaci.
• Přístupnost na konci projektu. Drahé opravy zpětně; sémantika a alt patří do obsahového modelu a CI od začátku.