Chcete zjistit, jak je na tom váš web s přístupností? V tomto článku vám ukážeme, jak si jednoduše ověřit základní přístupnost pomocí bezplatného nástroje WAVE. Dozvíte se, co jednotlivé nálezy znamenají a na co si dát pozor. Přístupnost nemusí být složitá – stačí vědět, kde začít.
V předchozím článku "Připravte se na novou éru přístupnosti" jsme si vysvětlili, co je to přístupnost na webu a proč je důležitá – nejen pro uživatele se zdravotním omezením, ale pro všechny návštěvníky vašeho webu. Dnes se podíváme na to, jak si jednoduše ověřit, jestli váš web splňuje základní pravidla přístupnosti, které vyžaduje legislativa.
Existuje jeden správný nástroj?
Odpověď je "Ne".
Přístupnost webu lze testovat různými způsoby. Na trhu je několik nástrojů, které umí prověřit, zda je web srozumitelný pro čtečky obrazovky, zda má dostatečný kontrast barev nebo jestli jsou všechny interaktivní prvky dostupné i pomocí klávesnice.
Důležité je ale vědět jedno: žádný nástroj není univerzální nebo oficiálně doporučený jako "ten pravý". Každý má své silné i slabé stránky, a proto je nejlepší používat více přístupů a výsledky kombinovat.
Proč doporučujeme WAVE?
Nástroj, který za nás doporučujeme je WAVE. Nástroj je jednoduchý, srozumitelný a dostupný online. WAVE je zdarma, nevyžaduje žádnou registraci nebo přihlášení a nevyžaduje ani žádné technické znalosti. Funguje přímo ve vašem prohlížeči a zobrazí vám, kde jsou na stránce potenciální problémy – ať už jde o chybějící popisky obrázků, nedostatečný kontrast nebo neoznačená tlačítka.
WAVE je takový dobrý výchozí bod ale je dobré ho využít v kombinaci nějaké asistenční technologie jako jsou například čtečky obrazovky. Díky tomu si reálně vyzkoušíte, jak člověk s nějakým omezením přistupuje k vašemu webu. Čtečku obrazovky např. NVDA) si můžete zdarma stáhnout do vašeho počítače.
Jak pracovat s nástrojem WAVE?
Přejděte na stránky nástroje WAVE (případně si můžete do Chromu stáhnout doplněk). Vložte url adresu vašeho webu do vyhledávacího pole a stiskněte Enter.
POZOR: WAVE vám nezkontroluje celý web naráz ale jen stránku, kterou tam vložíte. Tzn. že pokud do nástroje nahrajete https://www.domena.cz, zkontroluje vám to jen úvodní stránku.
Poté co nástroj udělá audit, zobrazí vám vaší stránku s výsledky. Postranní panel zobrazuje nálezy podle různých kategorií (chyby, upozornění, informace) a zároveň máte barevně tyto nálezy vizualizované na stránce, díky tomu poznáte u jakých prvků je problém.
Každý nalezený problém můžete rozkliknout a WAVE vám vysvětlí, o co jde, proč je to problém a často i jak to opravit. Všechny hlášené problémy si sami opravit nemůžete, takže si pojďme ukázat na co se zaměřit.
Záložka Summary
Na této záložce je přehled všech nalezených problémů na stránce. Nástroj tady ukazuje kolik chyb, varování a informací na stránc našel. Ne všechno jsou chyby (něco je třeba jen upozornění) a zároveň ne všechno spadá do chyb, které je nutné splňovat v rámci legislativy (konkrétně úrovně AA).
Zaměříme se tedy na chyby, které se nás v tuto chvíli týkají. Obecně v tomto přehledu nás zajímají errory, tedy to co je červené:
- Errors - chyby/problémy s přístupností, které je potřeba opravit (např. chybějící alternativní popisky u obrázků)
- Contrast errors - prvky, které mají špatný barevný kontrast (např. světle šedý text na bílém pozadí).
Pro zobrazení těchto konkrétních problémů klikněte na View details nebo na záložku Details.
Záložka Details
V detailu se už zobrazují konkrétní problémy a prvky, které je potřeba vyřešit. U každé položky se zobrazuje ikona (např. červený křížek pro chybu), počet výskytů na stránce a krátký popis problému (např. „Image missing alternative text“ = Obrázek bez alternativního textu).
Po kliknutí na některou z položek se zvýrazní místo na stránce, kde se problém nachází. Zároveň pokud na stránce rozkliknete nějaký prvek, tak se vám zobrazí detailnější popis a dvě tlačítka - "Reference" a Code".
- Reference - něco jako nápověda, kde je vysvětlení, proč je to problém z pohledu přístupnosti, jak to ovlivňuje uživatele a co s tím dělat.
- Code - toto je důležité hlavně pro vývojáře a programátory, protože se zobrazí html kód. Může vám to ale pomoct např. při ověření, zda se propisuje alt u obrázku.
Konkrétní errory:
- Linked image missing alternative text - u obrázku není vyplnění alternativní popisek (čtečka uživateli neřekne o jaký obrázek se jedná - resp. co na obrázku je)
- Missing form label, Empty form label a Multiple form labels - tyto errory se týkají formulářů a jejich popisků - chybějící nebo prázdný popisek. V tomto případě uživatel, který používá čtečku neví o jaké pole se jedná. Tento typ errorů sami nevyřešíte, toto řešíme na naší straně.
- Empty button - tlačítko nemá žádný text ani ikonu s popiskem, tím pádem čtečka neřekne, co dělá. Opět stejně jako předchozí error - toto si nevyřešíte sami.
- Empty link - odkaz nemá žádný text nebo obrázek s popiskem, takže není jasné, kam vede. U tohoto typu erroru záleží, kde je výskyt. Nejčastěji vám toto může hlásit u sociálních sítí. Pokud sociální sítě máte v hlavičce webu, tak si sami popisek nevyplníte. Pokud je ale máte v jiné části webu např. v těle stránky nebo často jsou umístěné v patičce, tak tam už si popisek sami nastavit můžete.
Záložka Order a Structure
Tyto dvě záložky pro vás nejsou až tak důležité ale můžete si zde ověřit, zda máte stránku správně uspořádanou - např. správnou hierarchii nadpisů.
- Order - ukazuje v jakém pořadí čtečka obrazovky prochází prvky na stránce. Pomáhá zjistit, jestli je navigace logická (např. nejdřív nadpis, pak text, pak tlačítko).
- Structure - zobrazuje strukturu stránky – hlavně nadpisy (H1, H2, H3 atd.). Pomáhá ověřit, jestli má stránka správně uspořádaný obsah.
Záložka Contrast
Záložka Contrast ukazuje, jestli jsou barvy na webu dostatečně čitelné – hlavně text vůči pozadí. Opět je zde zobrazen seznam všech míst, kde kontrast nevyhovuje (např. světlý text na světlém pozadí). Každý výskyt lze opět prokliknout a zjistit jaký kontrastní poměr daného výskytu je.
Obecně by měl být poměr alespoň 4.5:1, což vám i nástroj ukazuje - pokud tohoto poměru dosahujete bude vám zeleně svítit "Pass" u WCAG AA.
Správný kontrast je důležitý nejen pro lidi se zrakovým omezením, ale i pro běžné návštěvníky – třeba na mobilu na slunci. Pokud má váš web špatný kontrast, může být těžko čitelný nebo úplně nečitelný.
Toto je základní práce s nástrojem WAVE pro kontrolu přístupnosti na vašem webu. Určitě doporučujeme si tímto způsobem svůj web zkontrolovat a případně se obrátit na nás pokud se odhalí výskyty, které si sami nemůžete opravit.
V dalším článku si projdeme jednotlivá pravidla, která si můžete sami upravit a zároveň vám můžou vyjít jako chyba pomocí tohoto nástroje (např. alternativní popis u obrázků).