Co je webová přístupnost? WCAG a inkluzivní design vysvětleno
Webová přístupnost znamená stavět weby a aplikace tak, aby je mohli používat lidé se zdravotním postižením — ať jsou nevidomí a používají čtečku obrazovky, nemohou používat myš, mají zhoršený zrak nebo barvoslepost, jsou neslyšící, nebo mají kognitivní či vývojové poruchy učení. V praxi jde o věci jako textové alternativy pro obrázky, dostatečný kontrast barev, formuláře s řádnými popisky a to, aby vše šlo ovládat jen klávesnicí. Mezinárodním standardem je WCAG, Web Content Accessibility Guidelines od W3C.
Přístupnost se často zkracuje na a11y — „a“, pak 11 písmen, pak „y“.
Proč na přístupnosti záleží, když stavíte s AI
AI tvůrci umějí vyrobit aplikace, které vypadají správně. Přístupnost se týká hlavně toho, co na snímku obrazovky nevidíte: jestli je tlačítko opravdu tlačítko, jestli má vstupní pole popisek, který čtečka obrazovky dokáže oznámit, a jestli se do menu dostanete klávesou Tab.
Proto je dobré se ptát:
- Snadno se přehlédne. Vlastně stylovaný rozbalovací seznam může vypadat dokonale a být bez myši nepoužitelný. Nevšimnete si toho, dokud to netestujete.
- Je levnější to udělat správně brzy. Požádat o přístupné komponenty už v prvním zadání stojí téměř nic. Dodatečné úpravy hotové aplikace znamenají zasahovat do každé obrazovky.
- Pomáhá to všem. Titulky pomáhají lidem v hlučném prostředí, dobrý kontrast pomáhá lidem na telefonu na slunci a jasné popisky pomáhají všem rychleji vyplnit formuláře.
- Překrývá se to s SEO. Správné nadpisy, popisné odkazy a alt texty pomáhají i vyhledávačům pochopit vaše stránky — viz SEO pro weby stavěné s AI.
- Může být vyžadována zákonem. Podle toho, kde působíte a komu sloužíte, může být přístupnost zákonná povinnost.
Každodenní přirovnání
Představte si vchod do budovy.
Schody fungují pro mnoho lidí. Rampa slouží lidem na invalidním vozíku — a také rodičům s kočárky, kurýrům s vozíky a cestujícím s kufry. Automatické dveře, jasné značení, Braillovo písmo na tlačítkách výtahu a dobré osvětlení odstraní překážku pro někoho.
Webová přístupnost je stejná myšlenka pro digitální prostor: rampy, značení a zábradlí vaší aplikace. A jako u budovy je mnohem snazší zahrnout rampu do plánů, než ji přidávat, až beton ztvrdne.
WCAG v kostce
WCAG vydává iniciativa W3C Web Accessibility Initiative. Aktuální verze je WCAG 2.2, poprvé vydaná v říjnu 2023. Je zpětně kompatibilní: obsah splňující WCAG 2.2 splňuje i 2.1 a 2.0 a W3C doporučuje používat nejnovější verzi. WCAG 2.2 je také schválen jako mezinárodní standard ISO/IEC 40500:2025. Velmi odlišný WCAG 3 je ve vývoji jako raný návrh, ne jako hotový standard.
WCAG je uspořádán do čtyř principů, často zapamatovaných jako POUR:
| Princip | Význam | Příklady |
|---|---|---|
| Vnímatelnost (Perceivable) | Lidé mohou obsah vnímat smysly, které používají | Alt texty obrázků, titulky videí, dostatečný kontrast |
| Ovladatelnost (Operable) | Lidé mohou ovládat prvky a procházet web | Přístup klávesnicí, žádné časové limity bez možnosti prodloužení, viditelné zaostření |
| Srozumitelnost (Understandable) | Obsah a chování dávají smysl | Jasné popisky, užitečná chybová hlášení, konzistentní navigace |
| Robustnost (Robust) | Funguje s různými prohlížeči a asistivními technologiemi | Správné prvky HTML, správné názvy a role ovládacích prvků |
Každé pravidlo má ověřitelná kritéria úspěšnosti na třech úrovních:
- Úroveň A — minimum. Selhání zde některým lidem úplně zablokuje přístup.
- Úroveň AA — standardní cíl a úroveň, na kterou odkazuje většina zákonů a politik.
- Úroveň AAA — nejvyšší úroveň. Na některých místech se vyplatí ji cílit, ale W3C nedoporučuje ji vyžadovat pro celé weby, protože některý obsah ji nemůže splnit.
WCAG 2.2 přidal k verzi 2.1 devět kritérií úspěšnosti, mezi nimi Minimální velikost cíle (Target Size) na úrovni AA — klikatelné cíle by obecně měly mít alespoň 24 × 24 CSS pixelů, s výjimkami — a Minimální přístupné ověřování (Accessible Authentication), které omezuje kroky přihlášení závislé na paměti nebo hádankách, například nutnost znovu přepisovat heslo bez možnosti vložit ho. Zrušil také zastaralé kritérium „Parsing“.
Praktický příklad: registrační formulář
Tady je registrační formulář, jaký může AI vytvořit, a co zjistí kontrola přístupnosti:
| Problém | Koho se týká | Oprava |
|---|---|---|
| Vstupy používají zástupný text („E-mail“) místo popisků | Uživatelé čteček obrazovky; kdokoli, kdo po začátku psaní zapomene, co pole bylo | Viditelný <label> propojený s každým vstupem |
| Světle šedý text na bílé, daleko pod kontrastem 4,5:1 | Lidé se zhoršeným zrakem, kdokoli venku | Tmavší text, který splňuje kontrastní poměr 4,5:1 |
| Chyby se ukazují jen červeným rámečkem | Uživatelé s barvoslepostí, uživatelé čteček obrazovky | Textové hlášení vedle pole, které čtečka obrazovky oznámí |
Tlačítko „Registrovat“ je stylovaný <div>, ne <button> | Uživatelé klávesnice a čteček obrazovky ho nemohou aktivovat | Použít skutečný prvek <button> |
| Při procházení polí Tabem není vidět žádný obrys | Uživatelé klávesnice ztrácejí přehled, kde jsou | Jasný styl zaostření |
| Obrázek loga nemá alt text | Uživatelé čteček obrazovky slyší název souboru | Alt text typu „Acme Bookings“ |
Žádná z těchto oprav výrazně nezmění vzhled formuláře. Všechny však mění to, zda ho někteří lidé vůbec mohou použít.
Klíčové pojmy
| Pojem | Význam |
|---|---|
| Čtečka obrazovky | Software, který přečte obrazovku nahlas nebo na Braillův řádek, například VoiceOver, NVDA nebo JAWS. |
| Alt text | Textový popis obrázku, který čtou čtečky obrazovky. Dekorativní obrázky mají prázdný alt text, aby byly přeskočeny. |
| Kontrastní poměr | Jak moc se liší barvy textu a pozadí, od 1:1 do 21:1. |
| Navigace klávesnicí | Používání webu klávesami Tab, Enter, mezerník a šipkami místo myši. |
| Indikátor zaostření (focus) | Viditelný obrys ukazující, na kterém prvku je klávesnice. |
| Sémantické HTML | Použití správného prvku pro danou věc — <button>, <nav>, <h2> — aby prohlížeče a asistivní technologie stránce rozuměly. |
| ARIA | Dodatečné atributy, které popisují vlastní ovládací prvky asistivním technologiím. Používejte je střídmě; nejdřív nativní prvky HTML. |
| Asistivní technologie | Nástroje, kterými lidé přistupují k počítačům, od čteček obrazovky po spínací zařízení a hlasové ovládání. |
Časté mylné představy
- „Přístupnost je důležitá jen pro nevidomé.“ Zahrnuje zrakové, pohybové, sluchové, řečové a kognitivní postižení, i dočasné situace, jako zlomená ruka.
- „Přístupné weby vypadají prostě.“ Přístupnost omezuje několik věcí — kontrast, styly zaostření, velikost textu —, ale dobře vypadající přístupné weby jsou spíš pravidlem než výjimkou.
- „Automatická kontrola ukáže 100, takže máme hotovo.“ Automatické nástroje odhalí jen některé problémy. Zda je alt text opravdu smysluplný nebo zda postup dává smysl s čtečkou obrazovky, musí zkontrolovat člověk.
- „Překryvný widget nás udělá kompatibilními.“ Panely nalepené nad web nemohou opravit chybějící popisky nebo rozbitý přístup klávesnicí ve vašem kódu. Opravte zdroj.
- „Nemáme uživatele se zdravotním postižením.“ Možná to jen nevíte. Mnohá postižení nejsou vidět a lidé, na které narazí na překážku, obvykle prostě odejdou.
Co žádat od AI tvůrce
- „Postav to tak, aby splňovalo WCAG 2.2 úroveň AA.“
- „Používej sémantické HTML: skutečná tlačítka, odkazy, nadpisy v pořadí a popisky u každého pole formuláře.“
- „Ujisti se, že každý interaktivní prvek funguje jen s klávesnicí a má viditelný styl zaostření.“
- „Zkontroluj kontrast všech barev textu a ikon — 4,5:1 pro běžný text, 3:1 pro velký text a ikony.“
- „Přidej smysluplné alt texty informativním obrázkům a prázdné alt texty dekorativním.“
- „Zobrazuj chyby formuláře jako text propojený s polem, ne jen barvou.“
- „Respektuj nastavení uživatele pro omezení pohybu u animací.“
- „Spusť automatickou kontrolu přístupnosti a vypiš, co nedokáže otestovat, abych to mohl ověřit ručně.“
Pak to otestujte sami: odložte myš a zkuste dokončit hlavní postup jen pomocí Tab, Shift+Tab, Enter a mezerníku. Zkuste vestavěnou čtečku obrazovky na telefonu na hlavní stránce. Přiblížte prohlížeč na 200 % a podívejte se, zda se něco nerozbije.
Přístupnost v Mythexu
Mythex nemá vyhrazený kontrolní nástroj přístupnosti, takže přístupnost berte jako součást zadání a testování. Požádejte o WCAG 2.2 AA už v prvním zadání, výsledek zkontrolujte v náhledu klávesnicí a před publikováním použijte /test, aby agent prošel vaše hlavní postupy — viz testování aplikace. Recept na SEO také žádá sémantické nadpisy a smysluplné alt texty, které slouží oběma cílům.
Praktický kontrolní seznam najdete v článku jak zpřístupnit váš web. Pro design si přečtěte jak navrhnout dobře vypadající aplikaci s AI a před spuštěním jak otestovat aplikaci před spuštěním. Autoritativním zdrojem je přehled WCAG na stránkách W3C.
Otázky
Co je webová přístupnost jednoduše řečeno?
Webová přístupnost znamená navrhovat a stavět weby a aplikace tak, aby je mohli vnímat, chápat, ovládat a používat lidé se zdravotním postižením. Patří sem nevidomí uživatelé se čtečkami obrazovky, lidé, kteří nemohou používat myš, lidé se zhoršeným zrakem nebo barvoslepostí, neslyšící uživatelé a lidé s kognitivním postižením.
Co je WCAG?
WCAG (Web Content Accessibility Guidelines) je mezinárodní standard pro webovou přístupnost, který vydává W3C. Aktuální verze je WCAG 2.2, poprvé vydaná v říjnu 2023. Kritéria úspěšnosti se člení na úrovně A, AA a AAA a úroveň AA je cíl, na který se odkazuje většina organizací a zákonů.
Jaký kontrast barev vyžaduje WCAG?
Na úrovni AA potřebuje běžný text kontrastní poměr alespoň 4,5:1 vůči pozadí a velký text (zhruba 18 bodů nebo 14 bodů tučně) alespoň 3:1. Ikony a viditelné části ovládacích prvků potřebují alespoň 3:1 vůči tomu, co je vedle nich.
Je webová přístupnost zákonný požadavek?
V mnoha místech a pro mnoho organizací ano. Pravidla se liší podle země a odvětví — například Evropský akt o přístupnosti se vztahuje na mnoho spotřebitelských digitálních produktů a služeb v EU. Zkontrolujte pravidla, která se na vás vztahují, nebo se zeptejte právního poradce.
Může mi přístupnostní překryvný widget web zajistit shodu?
Sám o sobě ne. Překryvy přidají panel nad váš web, ale spolehlivě neopraví základní problémy, jako chybějící popisky, nepoužitelnou navigaci klávesnicí nebo nejasnou strukturu. Spolehlivý postup je opravit kód a obsah webu.