Přístupnost webu (ADA/WCAG): Průvodce pro firmy

Přístupnost webu znamená navrhovat a vyvíjet weby tak, aby je lidé s postižením mohli efektivně vnímat, chápat, procházet a používat. Patří sem lidé nevidomí nebo se slabým zrakem, lidé neslyšící nebo nedoslýchaví, uživatelé s pohybovým postižením, kteří nemohou používat myš, a lidé s kognitivním postižením, které ovlivňuje porozumění textu nebo pozornost. Celosvětově žije s nějakou formou postižení více než miliarda lidí, zhruba 16 % světové populace, což z přístupnosti činí otázku oslovení významného a často opomíjeného publika.

Přístupnost není doplněk ani něco, co se řeší na poslední chvíli. Je to základní kvalita dobře postaveného softwaru, na stejné úrovni jako bezpečnost, výkon a použitelnost. Když je web přístupný, funguje lépe pro všechny, a nejen pro lidi s trvalým postižením. Titulky pomohou někomu, kdo sleduje video v hlučném prostředí. Text s vysokým kontrastem se lépe čte na telefonu na přímém slunci. Navigace klávesnicí prospívá zkušeným uživatelům, kteří raději nepoužívají myš. Zlepšení přístupnosti má kaskádový efekt, který zvyšuje kvalitu celého zážitku.

Ve společnosti GRADAX začleňujeme přístupnost do každého projektu tvorby webu už od fáze wireframů, nikoli jako dodatečnou opravu po spuštění. Dodatečné zpřístupnění existujícího webu je třikrát až desetkrát dražší než jeho zapracování od začátku a výsledky jsou jen zřídkakdy tak plynulé. Začít přístupně je jediný přístup, který dává smysl eticky i finančně.

Ve Spojených státech soudy vyložily zákon o Američanech s postižením (ADA) tak, že se vztahuje na weby, zejména pro firmy poskytující služby veřejnosti. Ministerstvo spravedlnosti vydalo v dubnu 2024 konečné pravidlo, které po webech státní a místní správy vyžaduje soulad s WCAG 2.1 na úrovni AA, a federální soudy opakovaně rozhodly, že soukromé firmy s webem určeným veřejnosti mají obdobné povinnosti. Žaloby podle ADA zaměřené na nepřístupné weby vzrostly od roku 2018 o více než 300 % a mimosoudní vyrovnání a rozsudky běžně přesahují 50 000 USD.

V Evropě vstupuje v červnu 2025 v platnost evropský akt o přístupnosti (EAA), který vyžaduje, aby široká škála digitálních produktů a služeb splňovala standardy přístupnosti. Patří sem e-shopy, bankovní aplikace, rezervační systémy pro dopravu a každá firma prodávající digitální služby spotřebitelům v EU. Nedodržení může vést k pokutám, stažení produktu z trhu a poškození pověsti. EAA výslovně uvádí WCAG 2.1 jako technický standard, kterým by se firmy měly řídit.

WCAG 2.2, zveřejněné v říjnu 2023, je nejnovější verzí směrnic pro přístupnost webového obsahu, které spravuje W3C. Přináší devět nových kritérií úspěšnosti zaměřených na přístupnost na mobilních zařízeních, kognitivní postižení a výzvy při ověřování. Firmy, na které se vztahuje ADA, EAA nebo Section 508, by měly cílit na WCAG 2.2 úroveň AA jako základ souladu. Úroveň A řeší nejkritičtější bariéry, úroveň AA pokrývá většinu potřeb uživatelů a úroveň AAA představuje zlatý standard, ale často je u celého webu nerealistická.

Kromě zákonného souladu dává přístupnost silný obchodní smysl. Celosvětová kupní síla lidí s postižením a jejich rodin přesahuje podle Return on Disability Group 13 bilionů USD ročně. Přístupné weby se také zpravidla lépe umisťují ve vyhledávačích, protože mnoho osvědčených postupů přístupnosti, sémantické HTML, popisný alt text, logická hierarchie nadpisů a čistý text odkazů, je zároveň osvědčeným postupem pro SEO. Google algoritmy odměňují strukturovaný, dobře označený obsah, což je přesně to, co přístupný kód poskytuje.

Přístupné weby také lépe konvertují. Průzkum Click-Away Pound Survey zjistil, že 71 % uživatelů s postižením opustí web, který se obtížně používá, a 82 % z nich by utratilo více, kdyby byla zkušenost přístupná. Lepší popisky formulářů, chybové zprávy a srozumitelnější navigace prospívají všem uživatelům, nejen těm s postižením. Naši klienti v odvětvích zdravotnictví a medicíny mají z investic do přístupnosti obzvlášť silné výnosy, protože jejich publikum zahrnuje starší pacienty a pečovatele, kteří se spoléhají na asistivní technologie.

Přístupnost také chrání vaši investici do budoucna. Jak se předpisy rozšiřují a jejich vymáhání zesiluje, firmy, které dnes vytvářejí přístupné produkty, se zítra vyhnou nákladným opravám. Udržovat přístupnost jako průběžnou praxi je výrazně levnější než podstupovat periodické audity a havarijní opravy.

WCAG organizuje své pokyny kolem čtyř zásad, často označovaných zkratkou POUR: vnímatelnost, ovladatelnost, srozumitelnost a robustnost. Vnímatelnost znamená, že veškerý obsah musí být uživatelům prezentován způsobem, který mohou vnímat, obrázky potřebují alternativní text, videa titulky a barva nesmí být nikdy jediným způsobem, jak sdělit informaci. Ovladatelnost znamená, že veškerá funkčnost musí být dostupná přes klávesnici, uživatelé musí mít dostatek času obsah přečíst a použít a nic nesmí způsobovat záchvaty nebo fyzické potíže. Srozumitelnost znamená, že text musí být čitelný, stránky se musí chovat předvídatelně a formuláře musí uživatelům pomáhat vyhnout se chybám a opravit je. Robustnost znamená, že obsah musí být kompatibilní se současnými i budoucími asistivními technologiemi.

WCAG 2.2 zavádí několik důležitých kritérií. Tažení musí mít alternativu ovladatelnou jedním ukazatelem, takže uživatel, který nemůže provést gesto tažení, může stále přeskládat položky nebo posouvat posuvníky. Cílová velikost interaktivních prvků musí být alespoň 24 × 24 CSS pixelů, což zabraňuje frustraci z drobných dotykových cílů na mobilních zařízeních. Konzistentní mechanismy nápovědy, jako je chat podpory nebo odkaz na kontakt, se musí objevovat na stejném relativním místě napříč stránkami. Viditelnost fokusu vyžaduje, aby indikátory fokusu klávesnice splňovaly minimální prahové hodnoty kontrastu a velikosti, aby uživatelé vždy viděli, kde se na stránce nacházejí.

U webových aplikací se složitým rozhraním, jako jsou dashboardy, datové tabulky a interakce přetahováním, vyžaduje soulad s WCAG pečlivou pozornost věnovanou rolím ARIA, živým oblastem a správě fokusu. Tříditelná tabulka potřebuje atributy aria-sort. Oznámení typu toast potřebuje role="alert". Modální dialog musí zachytit fokus a po zavření jej vrátit na prvek, který jej otevřel. Tyto detaily se snadno přehlédnou, ale pro uživatele čteček obrazovky jsou klíčové.

Nejrozšířenější chybou v přístupnosti na webu je chybějící alternativní text u obrázků. Každoroční průzkum WebAIM u milionu nejnavštěvovanějších webů zjistil, že 54 % všech zjištěných chyb tvořil chybějící alt text, prázdné odkazy nebo chybějící popisky formulářů. Nejde o okrajové případy, jsou to nejzákladnější požadavky přístupného kódu a ovlivňují každého uživatele čtečky obrazovky, který na váš web zavítá. Dekorativní obrázky by měly používat alt="" (prázdný alt), aby je čtečky obrazovky přeskočily, zatímco informativní obrázky by měly mít stručný, popisný alt text.

Druhým nejčastějším problémem je nízký barevný kontrast. WCAG vyžaduje minimální poměr kontrastu 4,5:1 pro běžný text a 3:1 pro velký text. Mnoho populárních designových trendů, světle šedý text na bílém pozadí, pastelové barvy a tenké řezy písma, tyto prahové hodnoty nesplňuje. Nástroje jako WebAIM Contrast Checker nebo vestavěný analyzátor kontrastu v Chrome DevTools usnadňují ověření souladu. Neexistuje omluva pro nasazení textu, který uživatelé nedokážou přečíst.

Další častou chybou je spoléhání pouze na barvu při sdělování významu. Pole formuláře, které zčervená, aby označilo chybu, je pro uživatele s barvoslepostí neviditelné, pokud není doprovázeno ikonou, textovým popiskem nebo změnou vzoru. Indikátory stavu, které používají pouze zelenou, žlutou a červenou, jsou bezvýznamné pro 8 % mužů a 0,5 % žen s poruchou červenozeleného vidění. Vždy kombinujte barvu s druhotným indikátorem, jako je tvar, text nebo ikona.

Audit přístupnosti kombinuje automatické skenování s ručním testováním, aby odhalil bariéry na vašem webu. Začněte automatickými nástroji: WAVE, axe DevTools a audit přístupnosti v Lighthouse dokážou automaticky odhalit přibližně 30 % až 40 % porušení WCAG. Tyto nástroje během několika sekund označí chybějící alt text, nedostatečný kontrast, prázdná tlačítka a chybějící popisky formulářů. Spouštějte je na každé jedinečné šabloně stránky, nejen na domovské stránce.

Ruční testování pokrývá problémy, které automatizace nedokáže odhalit. Projděte celý web pouze pomocí klávesnice. Tab pro pohyb vpřed, Shift+Tab pro pohyb vzad, Enter pro aktivaci a Escape pro zavření. Každý interaktivní prvek musí být dosažitelný, vizuálně označený fokusem a ovladatelný bez myši. Poté testujte se čtečkou obrazovky: VoiceOver na Macu, NVDA na Windows nebo TalkBack na Androidu. Poslouchejte, jak jsou vaše stránky předčítány, a zaznamenejte každé místo, kde je zážitek matoucí, opakující se nebo neúplný.

Pro komplexní audit zapojte uživatele s postižením. Žádné množství technického testování nenahradí vhled někoho, kdo se na asistivní technologie spoléhá denně. Najměte tři až pět účastníků s různými postiženími, nevidomé, se slabým zrakem, s pohybovým omezením, s kognitivním postižením, a sledujte je při plnění klíčových úkolů na vašem webu. Problémy, které odhalí, se téměř vždy liší od toho, co označí automatické nástroje, a téměř vždy jsou důležitější.

Přístupnost začíná už ve fázi návrhu, ne až ve fázi vývoje. Designéři by měli ověřit kontrastní poměry barev ještě před finalizací palety, definovat stavy fokusu pro každý interaktivní prvek vedle stavů hover a zajistit, aby dotykové cíle splňovaly minimum 44 × 44 pixelů doporučené v Human Interface Guidelines od Applu (nebo alespoň požadavek WCAG 2.2 na 24 × 24 CSS pixelů). Záleží i na volbě typografie, text pod 16 pixelů se mnoha uživatelům čte obtížně a výška řádku pod 1,5 snižuje čitelnost pro lidi s dyslexií.

Informační architektura hraje významnou roli v kognitivní přístupnosti. Stránky by měly dodržovat logickou hierarchii nadpisů (h1, h2, h3), která uživatelům čteček obrazovky umožní navigovat podle úrovně nadpisu. Navigační menu by mělo být na všech stránkách konzistentní. Chybové zprávy by se měly zobrazovat u prvku, který chybu způsobil, ne v obecném banneru v horní části stránky. Pole formulářů by vždy měla mít viditelné popisky a nikdy by se neměla spoléhat výhradně na zástupný text, který po zahájení psaní zmizí.

Design systémy jsou nejúčinnějším nástrojem pro institucionalizaci přístupnosti. Když má vaše komponenta tlačítka vestavěné styly fokusu, komponenta vstupu vestavěné propojení s popiskem a komponenta modálního okna vestavěné uzamčení fokusu, stává se přístupnost výchozím stavem, ne volitelnou funkcí. Každá komponenta v design systému GRADAX splňuje WCAG 2.2 na úrovni AA, takže naši vývojáři nikdy nemusí přemýšlet o základní přístupnosti, je zabudovaná ve stavebních prvcích, ze kterých skládají.

Nabídka nástrojů pro přístupnost výrazně vyspěla. Pro automatizované skenování je průmyslovým standardem axe-core (engine za axe DevTools) s integracemi pro všechny hlavní testovací frameworky. Pro průběžné monitorování nabízejí nástroje jako Siteimprove, Deque a Tenon dashboardy, které v čase sledují shodu s předpisy v celé vaší doméně. Pro validaci ve fázi návrhu nabízejí Stark a Polypane kontrolu kontrastu a simulátory vidění přímo v design nástroji.

Automatizované testování ve vašem CI/CD pipeline zajišťuje, že se přístupnost nebude zhoršovat. Nástroje jako axe-playwright a jest-axe spouštějí kontroly přístupnosti jako součást vaší testovací sady a zastaví build, pokud se objeví nová porušení. Tím se přístupnost posouvá v procesu vývoje doleva, problémy se odhalí ještě před nasazením do produkce, ne až poté, co si uživatel stěžuje nebo advokát pošle výzvu.

Přístupnost není jednorázový projekt, je to nepřetržitá praxe. Každá nová stránka, funkce a aktualizace obsahu je příležitostí zavést nebo odstranit bariéry. Zařaďte přístupnost do svého kontrolního seznamu zajištění kvality, školte své editory obsahu, aby psali popisné alt texty a sémantické nadpisy, a počítejte v rozpočtu s pravidelnými manuálními audity od specialistů. Pokud chcete zjistit, jak na tom váš web je dnes a co by bylo potřeba k dosažení WCAG 2.2 na úrovni AA, kontaktujte náš tým a požádejte o komplexní posouzení přístupnosti.