Znalosti manGowebu
Graf znalostí
provoz / pristupnost
Kapitola

Přístupnost

Doručme obsah všem, ne jen někomu.

provozpřístupnostaccessibilityWCAGPOURkontrastalt textklávesnicefokusEN 301 549EAA424/2023Naposledy aktualizováno 28. června 2026

Pak přijde uživatel se čtečkou obrazovky. Tabulátorem dojede k modálnímu oknu a uvízne. Fokus zůstane uvnitř a ven se klávesnicí nedostane. Místo popisu obrázku čtečka přečte název souboru. Tlačítko „odeslat" je ve skutečnosti nastylovaný <div>, na který se klávesnice vůbec nedostane.

Jenže ta bariéra se jen uživatele se čtečkou obrazovky. Zaseknutý fokus zastaví i člověka, kterému umřela myš. Neviditelný kontrast se rozpadne každému, kdo čte na přímém slunci. Přístupnost proto není nálepka na hotový web ani charita pro úzkou skupinu „jich". Je to odolnost rozhraní vůči podmínkám, za kterých ho lidé reálně používají. Jednovětou definici WCAG a POUR drží společný slovník; tady z nich uděláme praktický postup, podobně jako v sesterské kapitole o právu, soukromí a souhlasu.

Postižení je kontext, ne kategorie

Trvalé postižení je jen extrém spektra, na kterém žije každý. Nevidomý se čtečkou je na jednom konci. Ale „postižený" jsi i ty pokaždé, když ti svítí slunce na displej, držíš telefon v jedné ruce a dítě v druhé, sedíš v hlučném baru, máš zlomené zápěstí, rozbitou myš nebo pomalé připojení. Hranice mezi „postiženým" a „normálním" uživatelem není pevná kategorie, ale kontext, do kterého se dřív nebo později dostane každý.

Proto funkce navržené pro extrém používá široké publikum. Říká se tomu curb cut effect, podle obrubníkových nájezdů pro vozíčkáře, které dnes používá každý s kočárkem nebo kufrem. Titulky čtou lidé bez sluchátek, klávesovou ovladatelnost ocení power-useři, dobrý kontrast zachrání čitelnost venku a srozumitelné chybové hlášky pomůžou každému, kdo vyplňuje formulář ve spěchu.

Čísla to jen dokládají. Podle WHO žije se závažným postižením asi 1,3 miliardy lidí, zhruba 16 % populace. A přesah se SEO není náhoda: sémantické nadpisy i alt text jsou sdílený signál pro čtečku i vyhledávač, takže přístupné bývá lépe indexovatelné. Nepřístupné UI je zároveň legitimní důvod redesignu.

Otázka „není to overkill pro pětistránkovou vizitku?" tím dostává odpověď. Dolů se škáluje aparát, ne otázky. Plný audit se čtečkou nemusíš na malém webu dělat každý týden, ale jestli web projdeš tabulátorem a má text kontrast, platí pro vizitku stejně jako pro velký e-shop.

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

WCAG stojí na čtyřech principech, zkratka POUR. Neber je jako seznam k odškrtnutí, ale jako čtyři otázky, které položíš nad stránkou, komponentou i jedním tlačítkem.

Perceivable, vnímatelnost. Dostane se obsah k uživateli i jinou cestou než výchozí? Textová alternativa obrázku, titulky u videa a dostatečný kontrast nejsou jen pro nevidomého nebo neslyšícího, fungují i pro tebe na přímém slunci nebo v hlučném baru bez sluchátek.

Operable, ovladatelnost. Dá se všechno ovládat bez myši, jen klávesnicí? Tutéž cestu, jakou jde power-user nesahající na trackpad, potřebuje i člověk, kterému zrovna umřela myš.

Understandable, srozumitelnost. Chápe člověk, co se děje a co dělat dál? Pomáhá předvídatelná navigace a chybové hlášky, které říkají konkrétně, co opravit. Tahle vrstva se potkává s informační architekturou: breadcrumb, skip-navigace a čitelné popisky nejsou ozdoba, ale přístupnostní prvky, a těží z nich i člověk ve spěchu.

Robust, robustnost. Přečte obsah i technologie, kterou neznáš? Sémantické HTML používá čtečka, hlasové ovládání, vyhledávač i asistivní nástroje, které ještě nevznikly.

Pro běžný web je praktický cíl úroveň AA podle WCAG 2.2 (doporučení W3C z 5. října 2023, editorial revize prosinec 2024). Ne AAA. Požadavky AAA, třeba kontrast 7:1, jsou na obsahovém webu často nepraktické a nebývají právním cílem.

Co si ověřit nad prvkem

Tři věci zvládneš zkontrolovat sám a pokryjí velkou část problémů.

Sémantika. HTML má říkat, čím prvky jsou. Nadpis je <h1><h6>, tlačítko je <button>, odkaz je <a>. Z téhle struktury si čtečka staví navigaci: uživatel skáče po nadpisech jako po obsahu. Když je tlačítko jen nastylovaný <div>, čtečka neví, že je to tlačítko, a klávesnice se na něj nedostane. Nadpisy navíc mají držet pořadí, z <h2> se neskáče na <h4>. WebAIM Million 2026 našel přeskočené úrovně nadpisů na 41,8 % úvodních stránek. Googlebot přitom čte tutéž strukturu, takže sémantika je rovnou SEO signál.

Klávesnice a fokus. Nejlevnější test je odložit myš a projít web tabulátorem. Dostaneš se na každý odkaz a pole? Vidíš, kde jsi? Jde modal zavřít, nebo fokus uvízne v menu či cookie banneru? WCAG 2.2 přidalo kritéria mířící přesně sem: 2.4.11 Focus Not Obscured (prvek s fokusem nesmí být schovaný za sticky hlavičkou), 2.5.7 Dragging Movements (akce „táhni" musí mít alternativu jedním klikem) a 2.5.8 Target Size s minimem 24×24 CSS px na klikací cíl. A pozor na outline: none bez náhrady. Nevypadá to čistěji, jen jsi zrušil viditelnou navigaci.

Kontrast jsou čísla, ne pocit. Nízký kontrast textu je nejčastější automaticky měřitelná chyba, WebAIM Million 2026 ho našel na 83,9 % stránek. Měří se nástrojem, ne okem. Světle šedá na bílé může vypadat jemně na monitoru designéra a rozpadnout se na mobilu venku.

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

Poslední řádek se přehlíží: 3:1 platí i pro hranici formulářového pole nebo aktivní záložku. Jinak uživatel nepozná, kam psát nebo co je vybrané.

Čtvrtou věc, alt text, podrobně řeší média a podklady včetně alt Decision Tree. Alt přitom popisuje funkci obrázku v daném místě, ne jeho vzhled (logo v hlavičce má alt="Přejít na hlavní stránku", ne „Logo XY"). A jedna past: alt="" u dekorace není totéž jako chybějící atribut. Bez alt čtečka často přečte název souboru, a u obrázku, který je zároveň odkazem, je výsledkem rozbitá navigace. Chybějící alt našel WebAIM na 53,1 % stránek.

Automat ani overlay tě nespasí

„Skener prošel, jsme přístupní" je konec, ne důkaz. Automatické nástroje jsou užitečné, ale pokryjí jen část. Deque ve studii z roku 2021 zjistila, že automatické testy odhalí zhruba 57 % objemu chyb (měřeno počtem nalezených problémů; podíl vůbec automaticky testovatelných WCAG kritérií je výrazně nižší). Najdou chybějící alt, nízký kontrast, prázdná tlačítka. Nepoznají, jestli alt dává smysl, jestli nadpisy vyprávějí logiku a jestli se objednávka dá dokončit bez myši. Čísla z WebAIM Million 2026 jsou tvrdá. 95,9 % stránek mělo detekovatelné selhání, průměrně 56,1 chyby na stránku. A to jsou jen ty, které automat vidí.

Nejdražší mýtus je overlay. Je to JavaScript, který se snaží přístupnost dolepit zvenčí za běhu stránky. Neopraví špatnou sémantiku, nevymyslí smysluplný alt, a někdy aktivně překáží čtečce, kterou už uživatel používá. FTC v roce 2025 uložila firmě AccessiBe pokutu 1 milion dolarů za klamavá tvrzení o automatické nápravě. Národní federace nevidomých overlaye dlouhodobě kritizuje a weby s widgetem stejně čelily žalobám. Widget tě neochrání, jen přidá na stránku další skript.

Testování proto potřebuje vrstvy. Automat běží jako brána v pipeline před mergem a na úrovni error blokuje regrese. Smysl a ovladatelnost ověří člověk klávesnicí a čtečkou (NVDA, JAWS, VoiceOver). A protože každá nová funkce může bariéru vrátit, re-audit patří mezi průběžné úkoly správy a údržby, ne na konec projektu. Sémantika a alt jako pole obsahového modelu jsou pak součást práce od začátku, ne dodatečná vrstva.

Kde začíná zákon

Přístupnost je i právní téma. Evropská směrnice 2019/882, European Accessibility Act, se od 28. června 2025 vztahuje na vybrané spotřebitelské služby a výrobky: e-commerce, bankovnictví, e-knihy, části dopravy, audiovizuální a elektronické komunikace. V Česku ji provádí zákon č. 424/2023 Sb.; u vybraných porušení může sankce dosáhnout až 10 milionů Kč. Výjimky existují (mikropodniky poskytující služby, čistě B2B, „nepřiměřená zátěž"), ale u konkrétního e-shopu nemusí být hranice triviální a „nepřiměřená zátěž" je zdokumentované posouzení, ne pocit.

Technický cíl je WCAG 2.2 AA. To je úroveň, kterou žádá norma EN 301 549 navázaná na EAA. Vyšší AAA řešit nemusíš. Compliance logiku „precedent, datum, pokuta" zná i právní kapitola, a stejně jako tam platí, že web už dávno není „jen web": v americké kauze Robles v. Domino's Pizza soud v roce 2019 rozhodl, že protidiskriminační pravidla dopadají i na web propojený s veřejnou službou, a Nejvyšší soud USA věc odmítl převzít.

Praktické minimum bez ohledu na to, jestli pod EAA spadáš: mít veřejné prohlášení o přístupnosti a cestu, jak nahlásit bariéru. Když uživatel narazí na problém, potřebuje vědět, kam ho poslat.

Co si pohlídat

Co web reálně obsahuje a kde nejdřív hledat bariéry, ukáže už inventura v discovery. A ať začneš kdekoli, dvě věci drží pořád. Nepřístupnost neopravíš řádkem kódu od overlaye ani ji nezachytíš zeleným skenerem. A narazíš na ni i ty sám, pokaždé když ti slunce svítí na displej.

Zdroje