Testování dostupnosti — praktické nástroje a metody
Seznamte se s bezplatnými nástroji pro kontrolu dostupnosti. Automatizované testování i manuální ověřování funkčnosti webu.
Proč testovat dostupnost vůbec?
Vytvoření dostupného webu není jen o splnění normy WCAG. Je to o tom, aby si vaše obsah mohli přečíst a používat všichni — ať už jsou to lidé s postižením zraku, sluchu nebo pohybového aparátu, nebo jen někdo se starým počítačem a pomalým internetem. Testování vám ukáže, kde jsou skutečné problémy.
Důležité je, že testování dostupnosti není jednorázová práce. Není to jako spustit nějaký nástroj, kouknout se na výsledky a máte hotovo. To by vás předvedlo. Správný přístup kombinuje automatizované nástroje s manuálním ověřením — a právě to si ukážeme v tomto článku.
Automatizované testovací nástroje
Tyto nástroje běží v prohlížeči nebo přímo na vašem webu a hledají běžné problémy. Jsou to první linie obrany.
WAVE
Rozšíření do prohlížeče, které zvýrazňuje chyby přímo na stránce. Vidíte hned, kde jsou problémy — chybějící alt texty, špatné barvy, špatná struktura nadpisů.
Jít na WAVEAxe DevTools
Integruje se do vývojářských nástrojů prohlížeče. Umožňuje vám testovat během vývoje — prakticky v každém kroku, ne až na konci.
Jít na Axe DevToolsLighthouse
Součást Chrome DevTools. Testuje nejen dostupnost, ale také výkon a SEO. Dostanete číslenou skóre a konkrétní doporučení, co zlepšit.
Jít na LighthouseWebAIM Contrast Checker
Zaměřuje se výhradně na barvy. Vložíte dvě barvy a on vám řekne, jestli splňují WCAG normy pro kontrastnost. Jednoduchý, ale nezbytný.
Jít na Contrast CheckerHeadings Map
Zobrazuje strukturu nadpisů na stránce. Zkontroluje, jestli máte h1, h2, h3 v správném pořadí nebo jestli jste nějaký vynechali.
Jít na Headings MapNVDA Screen Reader
Čtečka obrazovky zdarma. Stáhněte si ji a vyzkoušejte svůj web s ní. Slyšíte, jak se vaše stránka „čte” — zjistíte spoustu věcí, které nástroje zmapují.
Jít na NVDA
Manuální testování — co vám nástroje neřeknou
Automatizované nástroje jsou skvělé, ale vidí jen určitou část problému. Chybí jim lidský úsudek. Když testujete ručně, zjistíte věci, které algoritmy vůbec nezachytí.
Nejjednoduší způsob? Vezměte si klávesnici a odložte myš. Zkuste si projít váš web pouze pomocí tabulátoru. Můžete se dostat na všechny tlačítka a odkazy? Vidíte, kde jste právě na stránce? Skok ohniska je logický a srozumitelný?
Pak si stáhněte čtečku obrazovky — třeba NVDA (zdarma pro Windows) nebo VoiceOver (vestavěný na Macu). Poslouchejte, jak se vaše stránka čte nahlas. Pořadí informací dává smysl? Jsou nadpisy správně označeny? Obrázky mají popisný alt text, nebo jen vidíte „image.jpg”?
Co konkrétně testovat:
- Navigace pouze klávesnicí (Tab, Shift+Tab, Enter)
- Viditelný focus indikátor (ví uživatel, kde je?)
- Pořadí fokusování (je logické?)
- Formuláře se čtečkou (jsou popisky svázané s poli?)
- Chybové zprávy (jsou jasné a pomocné?)
- Barvy a kontrast (vidí se text bez problémů?)
Praktické metody testování v praxi
Nejlepší přístup kombinuje několik metod. Nemusíte být expert. Stačí vědět, kde hledat problémy.
Začněte s rychlým automatizovaným testem — spusťte Lighthouse nebo WAVE. Trvá to 2-3 minuty a hned vidíte největší problémy. Pak si vezměte čas na ruční testování. Ideálně s někým, kdo je zvyklý používat asistivní technologie — získáte úhly pohledu, na které byste sami nepřišli.
Nedávejte si sázku na to, že jste sami vynalezli všechny chyby. Ptejte se ostatních, nechte si web otestovat kolegou, který má pomalý internet, nebo někým na mobilu. Testování dostupnosti není jednorázová kontrola — je to proces.
Testování během vývoje, ne až na konci
Nejčastější chyba? Nechat testování dostupnosti na poslední chvíli. To je pak drahé a stresující.
Během vývoje
Instalujte si Axe DevTools do prohlížeče. Když kódujete novou sekci, otestujte ji hned. Není nic horší, než psát kód a zjistit až později, že není dostupný.
Při code review
Přidejte dostupnost do vašeho checklist. Kontrolujete alt texty? Jsou formuláře popsané? Mají focusable prvky správné pořadí?
Před launchováním
Spusťte komplexní test — Lighthouse, WAVE, manuální test s klávesnicí i se čtečkou. Opravte kritické chyby. Méně závažné věci můžete odložit na další verzi.
Praktické tipy na závěr
Pamatujte si pár věcí, která vám pomohou v každodenní práci:
- Alt texty nejsou volitelné. Každý obrázek má popis — ne “obr.png”, ale něco jako “Diagram procesního toku testování”.
- Barvy nejsou dost. Pokud se spoléháte na barvu k předání informace (červená = chyba), přidejte i text nebo ikonu.
- Čtečky obrazovky existují. Někdo je bude používat. Jazyková struktura HTML musí být správná — ne jen vizuální design.
- Klávesnice je důležitá. Ne všichni používají myš. Všechny interaktivní prvky musí být přístupné z klávesnice.
- Testujte s lidmi. Nejlepší tester je člověk, který je zvyklý používat asistivní technologie. Poslouchejte jejich feedback.
Shrnutí
Testování dostupnosti není překážka — je to investice. Stránka, která funguje pro všechny, je prostě lepší. Používá ji víc lidí, lépe se ji sdílí, a hlavně — nedělá nic bezdůvodně těžkého těm, kterým je už tak těžko.
Začněte malým krokem. Nainstalujte si WAVE nebo Axe DevTools. Spusťte Lighthouse na své stránce. Vezměte si klávesnici a zkuste navigovat bez myši. To vám už řekne spoustu věcí.
Pak se vraťte a opravte to nejdůležitější. Dostupnost není perfekcionismus — je to běžná péče o kvalitu.
Poznámka k tomuto článku
Informace v tomto článku jsou poskytovány za edukačními účely. Testování dostupnosti webu se vyvíjí a standardy se mění. Vždy zkontrolujte aktuální verzi WCAG 2.1 a doporučení od WebAIM či W3C. Jednotlivé situace se liší — pokud máte specifické otázky, zvažte konzultaci se specialistou na webovou dostupnost.