Žádná věda, žádné technikálie. V pár jednoduchých krocích vám ukážu test přístupnosti webu, který zvládnete sami i bez znalosti kódu. Získáte rychlý přehled o tom, jestli váš web zvládne přečíst a ovládat i někdo jiný než vy. Třeba bez myši, se zhoršeným zrakem nebo na sluníčku na mobilu.
Test přístupnosti webu zvládnete sami
Nebude to kompletní audit, ale základní kontrola. Není třeba instalovat software nebo znát kód. Stačí vám běžný prohlížeč, pár minut času a chuť zjistit, jak na tom jste.
Je text dobře čitelný?
Otevřete si web na mobilu za zhoršených podmínek (večer se sníženým jasem obrazovky nebo naopak na prudkém slunci). Můžete zkusit prozkoumat web s přimhouřenýma očima. Vidíte text dobře? Mají barvy dostatečný kontrast?
- Malý kontrast: světle šedý text #999 na bílém pozadí
- Dobrý kontrast: tmavě šedý text #333 na bílém pozadí
Špatně čitelný text (#999)
Dobře čitelný text (#333)
TIP: Otestujte si barevný kontrast na stránce Color.review. Kontrolu konkrétní barevné kombinace najdete i v Developer Tools v prohlížeči (Mozilla Firefox i Google Chrome).
Dá se web ovládat klávesnicí?
Otevřete si web na počítači a pohybujte se na něm jen pomocí klávesy tabelátor. Dostanete se postupně na všechny interaktivní prvky? Menu, tlačítka, rozbalovací seznamy, odkazy i všechny políčka formulářů?
Reagují všechny ovladatelné prvky na mezerník nebo Enter? Můžete opravdu web plnohodnotně ovládat:
- dostanete se i do 2. úrovně menu?
- rozbalíte hamburger (☰) menu?
- můžete se v galerii či kalendáři pohybovat šipkami dopředu a dozadu?
- nepřeskočíte nějakou oblast, např. formulář, rozklikávací FAQ apod.?
- nezaseknete se v nějaké oblasti (mapě, kalendáři), ze které se nemůžete dostat ven?
Pokud něco nefunguje, máte problém. Vy sáhnete po myši, ale co uživatelé, kteří myš nemohou použít?
Tip: Pokud nevidíte, kde se při procházení webu tabelátorem právě nacházíte, chybí na webu nastavený tzv. „fokus“. Stačí nastavit vlastnost :focus v css stylu.
Co se stane, když se nenačte obrázek?
Vypněte na webu obrázky (třeba pomocí rozšíření Web Developer v Mozilla Firefox). Dává obsah na stránce stále smysl?
Všechny obrázky musí mít atribut ALT, tedy alternativní text (alternativní popisek):
- Čistě dekorativní obrázek má mít alternativní popisek prázdný, tedy ALT=””.
- Pokud má obrázek informační hodnotu, popište krátce a výstižně do alternativního textu to, co na obrázku je.
- U obrázku, který obsahuje textové informace (např. plakát, pozvánka, infografika), přepište do alternativního textu všechny důležité informace.
- Pokud je na obrázku odkaz, vložte do alternativního popisu informací, kam odkaz vede.
TIP: Do popisku obrázku nepatří ani název souboru ani URL odkazu:
- Špatně: ALT=”obrazek1.jpg”
- Správně: ALT=”Příklad správného barevného kontrastu – černý text na světle zeleném pozadí”
Nástroje zdarma pro test přístupnosti webu
Vyzkoušejte 3 bezplatné nástroje, které zvládne použít i laik:
axe DevTools
Doplněk do prohlížeče (axe pro Chrome, axe pro Firefox): otestuje konkrétní stránku webu. Vypíše nalezené chyby na webu. Každou chybu vysvětlí, ukáže i chybný kód stránky, umí označit prvek na stránce, kterého se chyba týká.
Silktide Accessibility Checker
Doplněk do prohlížeče (Silktide pro Chrome): otestuje konkrétní stránku webu. Rozšíření obsahuje několik nástrojů:
- test přístupnosti webu
- test barev
- výpis alternativních textů u obrázků na stránce
- jednoduchý screen reader
- tok fokusů ve stránce
- zobrazení oblastí stránky
- výpis odchozích linků ze stránky
- strukturu nadpisů stránky
- simulaci zhoršeného vidění
- simulaci barevné slepoty
- simulaci dyslexie (tohle fakt vyzkoušejte, je to mazec)
WAVE (WebAIM)
WAVE je online nástroj. Zadáte URL webu, a dostanete vizuální přehled chyb. Nelekněte se, web se kvůli poznámkám docela rozsype. Zjistíte:
- neoznačená tlačítka,
- obrázky s chybějícími alternativními texty,
- špatné kontrasty,
- špatnou strukturu nadpisů,
- duplicitní odkazy,…
Test přístupnosti – checklist základních testů
Chcete jít trochu víc do hloubky a zkontrolovat web systematicky? Použijte praktický checklist základních testů přístupnosti.
- Najdete v něm přehled oblastí, které má smysl projít.
- Nejde o složitý audit, ale o rozšířený seznam bodů, které si můžete postupně odškrtávat.
- Seznam je doplněn odkazy na konkrétní kritéria, kterých se test týká.
Kdy je čas na odborný audit?
Základní test zvládnete sami. Jsou ale situace, kdy základní test nestačí – a vyplatí se zapojit odborníka. Konkrétně pokud:
- spravujete rozsáhlejší web s více funkcemi nebo složitou strukturou,
- provozujete e-shop,
- web musíte mít přístupný dle zákona (například jako obec, knihovna nebo neziskovka),
- nebo vám záleží na tom, aby byl web opravdu přístupný pro široké spektrum uživatelů.
Profesionální audit odhalí chyby, které základním testem nezjistíte. Získáte srozumitelná technická doporučení, co na webu upravit.
Shrnutí: Každý web si zaslouží být přístupný
- Přístupnost pomáhá všem – nejen uživatelům se znevýhodněním
- Základní test přístupnosti webu zvládnete sami
- Existují nástroje, které vám ukážou chyby a pomohou s prvními kroky
- Když si nejste jisti, oslovte specialistu – ušetří vám čas i starosti
Nejste si jisti nebo nerozumíte výsledkům testů přístupnosti?