Jak otestovat přístupnost webu: bezplatné nástroje a ruční kontroly

Tenhle příběh slýcháme často. Někdo spustí Lighthouse, dostane za přístupnost zelenou stovku a jde dál. O týden později napíše zákazník, že nemohl zaplatit, protože se k formuláři pro kartu nedostal klávesnicí. Obojí je pravda. Automatický test prošel a web přesto skutečného člověka zklamal.

Tento průvodce ukazuje, jak testovat pořádně s malým rozpočtem: které bezplatné nástroje spustit, jak vypadá 15minutová ruční rutina, jak poprvé vyzkoušet čtečku obrazovky a kdy zaplatit za audit.

Řekne mi automatický nástroj, jestli je můj web přístupný?

Ne. Automatické nástroje rychle najdou část problémů, ale na spoustu otázek přístupnosti musí odpovědět člověk. Když britská Government Digital Service otestovala 10 nástrojů na stránce se 143 známými chybami, nejlepší našel 41 %. W3C to říká jasně: hodnoticí nástroje „nedokážou určit přístupnost, mohou s tím jen pomoci“.

Test GDS (otevře se v nové kartě) pochází z února 2017 a jeho 41 % (nástroj Asqatasun) zahrnovalo i výzvy nástroje k ručním kontrolám. Nástroje se od té doby zlepšily, ale mezera má stejnou příčinu. Software pozná, že obrázek nemá alternativní text. Nepozná ale, že „červené šaty“ jsou špatný popis fotky modrého obleku, ani jestli má pořadí fokusu smysl.

Berte proto takový nástroj jako hlásič kouře, ne jako stavební posudek. Spustit ho se přesto vyplatí: WebAIM Million 2026 (otevře se v nové kartě) našel zjistitelné chyby na 95,9 % z milionu nejnavštěvovanějších domovských stránek, takže většina webů má po ruce rychlá zlepšení. Jak uvádí průvodce W3C výběrem nástrojů (otevře se v nové kartě): „Je zapotřebí lidský úsudek.“

Jaké bezplatné nástroje pro testování přístupnosti použít?

Použijte jeden nebo dva automatické nástroje, nástroj na kontrolu kontrastu a čtečku obrazovky. Nástroje používají různá pravidla a výsledky hlásí různě, takže dva obvykle zachytí víc než jeden. Každý z níže uvedených má bezplatnou verzi. Než se na některý spolehnete, ověřte si jeho aktuální podmínky, protože názvy, funkce i ceny se mění.

Co mohu ručně zkontrolovat za 15 minut?

Docela hodně. Easy Checks (otevře se v nové kartě), tedy jednoduché kontroly od W3C, pokrývají titulky stránek, alternativní texty, nadpisy, kontrast, odkazy pro přeskočení obsahu, viditelný fokus klávesnice, jazyk stránky, přiblížení, titulky u videí a popisky polí formulářů. Vyberte jednu důležitou stránku, například stránku produktu nebo rezervační formulář, a každé kontrole věnujte minutu nebo dvě. Najdete věci, které žádný nástroj nenahlásí.

W3C upozorňuje, že tyto kontroly „pokrývají jen několik otázek přístupnosti“, takže nejde o úplné hodnocení. Přesto jsou nejlépe investovanou čtvrthodinou:

1. Titulek stránky (1 minuta). Říká karta prohlížeče, co je to za stránku, například „Rezervace stolu | Bistro U Lípy“, místo všude stejného „Domů“?
2. Obrázky (2 minuty). Zobrazte alternativní texty pomocí WAVE nebo podobného nástroje. Jsou přesné? Přeskakují se dekorace?
3. Nadpisy (2 minuty). Vypište si nadpisy a přečtěte je samostatně. Dají se použít jako obsah stránky?
4. Kontrast (2 minuty). Zkontrolujte text odstavců, drobný šedý text, text tlačítek a text na obrázcích.
5. Klávesnice (4 minuty). Odložte myš a projděte stránku klávesou Tab (viz další oddíl).
6. Přiblížení (2 minuty). Přečtete při 200 % a pak 400 % stále všechno a ovládnete menu bez vodorovného posouvání?
7. Formuláře a jazyk (2 minuty). Klikněte na popisek každého pole; v dobře postaveném formuláři se kurzor přesune do pole. V hlášení nástroje zkontrolujte, zda nechybí jazyk stránky.

Jak testovat klávesnicí?

Odložte myš. Klávesou Tab se posouvejte dopředu, Shift+Tab zpět, Enterem otevírejte odkazy, mezerníkem nebo Enterem mačkejte tlačítka a šipkami se pohybujte v menu a mezi přepínači. Každý interaktivní prvek by měl být dosažitelný, vždy byste měli vidět, kde jste, a nikde byste se neměli zaseknout.

Na Macu Safari při stisku Tab přeskakuje odkazy, dokud v jeho pokročilých nastaveních nezapnete zvýrazňování každé položky webové stránky klávesou Tab (v anglické verzi „Press Tab to highlight each item on a webpage“). Pak zkontrolujte:

• Vidíte vždy, kde jste? Když obrys fokusu zmizí, uživatel klávesnice se ztratí.
• Je pořadí logické? Fokus by měl sledovat pořadí čtení.
• Nezakrývá něco fokus? Fixní hlavička nebo cookie lišta, která zakryje prvek s fokusem, nesplňuje kritérium Focus Not Obscured z WCAG 2.2.
• Dostanete se zase ven? Otevřete každé menu, vyskakovací okno a výběr data a zkuste je opustit. Escape by měl dialogová okna zavírat.
• Funguje celá cesta? Přidejte produkt, změňte množství, uplatněte slevový kód a dostaňte se k platbě bez myši.

Každou chybu zapište přesně: „Výběr velikosti na stránce produktu nejde otevřít Enterem ani mezerníkem“ se opraví mnohem rychleji než „klávesnice nefunguje“.

Jak poprvé otestovat web čtečkou obrazovky?

Začněte čtečkou obrazovky, kterou už vaše zařízení má, nebo NVDA ve Windows, a poslechněte si jednu stránku. Nesnažíte se ji ovládat jako expert. Kontrolujete, že se nadpisy, odkazy, tlačítka, obrázky a pole formulářů ohlašují se smysluplnými názvy a že nic důležitého nemlčí.

• Mac: Command+F5 zapne a vypne VoiceOver; Control+Option+U otevře rotor, seznam nadpisů, odkazů a ovládacích prvků formulářů.
• Windows: v NVDA přeskakujete mezi nadpisy klávesou H a Insert+F7 vypíše seznam odkazů a nadpisů.
• Telefon: zapněte VoiceOver (iPhone) nebo TalkBack (Android) a posouvejte se mezi položkami tažením prstu doprava. Nejdřív se naučte, jak ho vypnout.

Poslouchejte, na čem záleží nejvíc. V průzkumu WebAIM mezi uživateli čteček obrazovky z roku 2024 (otevře se v nové kartě) uvedlo 71,6 % respondentů, že se na dlouhé stránce nejdřív orientují podle nadpisů, takže začněte tam. Pak si vyvolejte seznam odkazů: pět odkazů „Číst dál“ nikomu nic neřekne. „Přidat do košíku, tmavomodrý svetr“ je užitečné tlačítko, samotné „tlačítko“ ne. Nakonec vyplňte formulář a zkontrolujte, že se přečte každé pole i každá chyba.

Se závěry buďte skromní. Pokud vám něco zní rozbitě, nejspíš to rozbité je; pokud to zní dobře, není to důkaz. Jak zkušení uživatelé skutečně pracují, popisuje článek jak lidé se zdravotním postižením používají web.

Jak zkontrolovat přiblížení, přizpůsobení obsahu a mezery v textu?

Přibližte prohlížeč na 200 % a zkontrolujte, že se text zvětšuje, aniž by se ořezával nebo překrýval. Pak otestujte přizpůsobení obsahu: při přiblížení 400 % v okně širokém 1 280 pixelů by se obsah měl vejít bez vodorovného posouvání. Nakonec zvětšete mezery mezi písmeny, slovy, řádky a odstavci a zkontrolujte, že se nic nerozbije ani nezmizí.

Odpovídají tomu kritéria WCAG 1.4.4 Změna velikosti textu, 1.4.10 Přizpůsobení obsahu (Reflow) (otevře se v nové kartě) a 1.4.12 Mezery v textu (otevře se v nové kartě). Přizpůsobení obsahu pracuje se šířkou 320 CSS pixelů, což podle W3C „odpovídá výchozí šířce okna 1280 CSS pixelů při přiblížení 400 %“. Kritérium mezer požaduje, aby se nic neztratilo, když si čtenář nastaví výšku řádku na 1,5násobek velikosti písma, mezery mezi odstavci na dvojnásobek, mezery mezi písmeny na 0,12násobek a mezery mezi slovy na 0,16násobek.

Bookmarklet pro mezery v textu, tedy malý skript uložený jako záložka, použije všechny čtyři hodnoty jedním kliknutím. Hledejte text, který přetéká z tlačítek, a popisky oříznuté na okraji. Při přiblížení 400 % ukazuje notebook zhruba totéž co malý telefon, takže dobře postavený responzivní web velkou část těchto kontrol už splní.

Jak zkontrolovat formuláře, chybové hlášky a pokladnu?

Každý důležitý formulář vyplňte třikrát: jednou správně, jednou se všemi poli prázdnými a jednou s úmyslnými chybami. Každé pole by mělo mít viditelný popisek, každá chyba by měla být vysvětlena slovy u svého pole a do polí pro heslo a ověřovací kód by mělo jít vkládat.

• Chyby. Červené „Neplatný vstup“ nestačí. „Zadejte datum platnosti ve tvaru MM/RR“ u pole ano. Po odeslání by se fokus měl přesunout na souhrn chyb nebo na první chybné pole.
• Přihlášení a kódy. Podle kritéria přístupné autentizace (otevře se v nové kartě) z WCAG 2.2 nevyhovuje blokování vkládání nebo správců hesel, pokud neexistuje jiný způsob přihlášení.
• CAPTCHA a časové limity. Uživatelé čteček obrazovky v průzkumu WebAIM označili CAPTCHA za nejproblematičtější prvek webu. Ověřte, že existuje přístupná alternativa a že časové limity jde prodloužit.

Podrobnější seznam pro e-shopy, včetně cookie lišt a vyskakovacích oken, najdete v našem kontrolním seznamu přístupnosti webu.

Co zahrnuje profesionální audit přístupnosti a kdy ho potřebuji?

Audit přístupnosti je strukturovaná kontrola, kterou provádí specialista podle stanovené normy, obvykle WCAG 2.1 nebo 2.2 na úrovni AA. Kombinuje automatické skeny s ručním testováním a testováním asistivními technologiemi na klíčových šablonách a cestách a končí zprávou se seřazenými prioritami. Potřebujete ho, když se na vás vztahuje zákon, před velkým spuštěním nebo když klienti chtějí doklady.

Než se dohodnete na ceně, zeptejte se:

• Podle jaké normy, verze a úrovně budete testovat?
• Které šablony a cesty audit zahrnuje? U e-shopu: domovská stránka, kategorie, produkt, košík, pokladna, stránky účtu a formuláře.
• Testujete ručně se čtečkami obrazovky, klávesnicí a přiblížením, a v jakých prohlížečích a na jakých zařízeních?
• Řadí zpráva problémy podle závažnosti, uvádí, kde se vyskytují, a navrhuje opravy?
• Je v ceně opakovaný test?

Ceny se výrazně liší podle dodavatele, země a rozsahu, takže porovnávejte, co zahrnují. Pokud se na vás vztahuje evropský akt o přístupnosti, audit také podloží vaše veřejné prohlášení; na koho se akt vztahuje, vysvětluje náš průvodce EAA.

Proč testovat s lidmi se zdravotním postižením?

Protože splnit normu a být snadno použitelný není totéž. Pokladna může splnit všechna kritéria WCAG, a přesto zabrat uživateli čtečky obrazovky dvacet minut. W3C uvádí, že hodnocení s uživateli se zdravotním postižením „odhalí problémy s použitelností, které samotné hodnocení souladu neodhalí“, a navíc vašemu týmu ukáže, jak lidé web skutečně používají.

Laboratoř nepotřebujete. Několik sezení nad nejdůležitějším úkolem, například nalezením produktu a zaplacením, vás naučí víc než další kolo skenů. Účastníky hledejte přes organizace lidí se zdravotním postižením, výzkumné agentury nebo mezi vlastními zákazníky a za čas jim zaplaťte. Nechte je používat vlastní zařízení a nastavení. Praktickou stránku věci popisuje průvodce W3C zapojení uživatelů do hodnocení (otevře se v nové kartě).

Co s výsledky?

Seřaďte problémy podle toho, jak moc lidi blokují a kde se vyskytují, opravte je ve vlastním kódu a obsahu webu, otestujte znovu a zapište, co ještě zbývá. Pole bez popisku v pokladně je důležitější než drobný problém s kontrastem v patičce a oprava ve sdílené šabloně spraví každou stránku, která ji používá.

1. Stanovte priority. Nejdřív blokující problémy na klíčových cestách (pokladna, rezervace, registrace), pak sdílené šablony, nakonec jednotlivé stránky.
2. Opravujte příčinu. Změňte šablonu, komponentu nebo obsah, ne jen symptom.
3. Testujte znovu. Zopakujte stejné kontroly, ručně i nástroji.
4. Dokumentujte. Známé problémy uveďte v prohlášení o přístupnosti a připište k nim data. Novější kritéria vysvětluje náš průvodce WCAG 2.2.
5. Opakujte. Ke každému vydání přidejte kontrolu klávesnicí a sken.

Pokud používáte widget přístupnosti, včetně našeho, testujte se zavřeným panelem. Panel jako SiteAccessible dává návštěvníkům další možnosti, jak si stránku upravit, ale WCAG posuzuje, zda stránka funguje ve výchozím stavu. Některé auditní systémy stránky se skriptem overlaye vůbec nehodnotí, proto se nejdřív domluvte s auditorem.