Každý rok v rámci našeho projektu Blind Friendly Web otestujeme několik desítek webů z hlediska přístupnosti pro návštěvníky s těžkým zdravotním postižením. Ačkoliv řada chyb je specifických pro daný web, přece jen se najdou chyby, které jsou pro většinu testovaných webů společné. Rád bych vás s nimi v tomto článku seznámil, zdůvodnil, proč se jedná o chyby, a také poradil, jak je opravit či se jim do budoucna vyvarovat. Věnovat se budeme chybám, které dělají problém především návštěvníkům se střední či těžkou slabozrakostí.

Dostatečný barevný kontrast

Dostatečný barevný kontrast písma je jeden z poměrně častých prohřešků, byť požadavky na kontrast se v poslední době docela zmírnily. Aktuálně požadovaná hodnota je minimálně 4,5:1 pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů. Aktuálním algoritmem pro měření kontrastu je algoritmus světelnosti (používá se jak pro potřeby českých pravidel přístupnosti, tak i WCAG 2.0), pro měření kontrastu lze použít například výborný desktopový Colour Contrast Analyzer či online Colour Contrast Checker. Ani toto číslo však nelze brát dogmaticky, ale spíše jen jako vodítko a snažit se, aby kontrast byl co nejlepší. V době psaní tohoto článku jsme se při testování setkali se situací, kdy kontrast papírově odpovídal (#FF0000 na #000000, kontrastní poměr je 5,3:1), ale mí těžce slabozrací kolegové jej za dostatečný nepovažovali.

Zvýraznění prvku, který má focus

S dostatečným kontrastem barev úzce souvisí i dostatečné zvýraznění prvku, který má focus. Na zvýraznění odkazu při najetí myši tvůrci webu zpravidla myslí, horší už je to při procházení webu z klávesnice, kdy v mnoha případech je zvýraznění řešeno pouze systémovým rámečkem, což zvláště u stránek s menším písmem a množstvím odkazů nemusí být dostačující a uživatel se může velmi snadno ztratit. Řešení je přitom poměrně jednoduché – v CSS ke každému :hover přidal ještě dvě stejné definice s :active (pro IE) a :focus (pro moderní prohlížeče). Ideálním zvýrazněním je invertování barvy textu a pozadí odkazu. Procházení z klávesnice je vhodně ošetřeno například na www.oupetrovi­ce.cz.

Alternativní verze vzhledu webu

Jako jedno z řešení problémů s nedostatečným kontrastem barev v primární verzi webu se nabízí použít alternativní verzi vzhledu webu. Možné to je, přináší to ale s sebou několik potenciálních problémů, na které je třeba pamatovat a ošetřit je. Jen tak bude alternativní verze sloužit svému účelu.

1. Odkaz na alternativní verzi musí být dostatečně výrazný a dostatečně blízko začátku stránky, aby si jej slabozraký uživatel vůbec všiml a mohl alternativní verzi začít používat.
2. Alternativní verze musí být obsahově shodná s verzí primární a musí být stejně často aktualizována.
3. Alternativní verze musí být navržena tak, aby lahodila oku (k tomuto tématu připravuji samostatné povídání) a uživatel s ní byl schopen a ochoten pracovat.

Ne vždy se tvůrcům webů daří výše uvedené požadavky dodržet, proto je ideální snažit se mít co nejvíce kontrastní už primární verzi a tu alternativní nabídnout pouze jako bonus pro ty, kterým primární verze z nějakého důvodu nevyhovuje. Příkladem takového řešení může být web obce Třebihošť.

Nezávislost na barevném schématu

Další poměrně častou chybou je špatné zobrazování obsahu stránky při nastavení jiného barevného schématu vzhledu operačního systému, než je ten standardní. Slabozrací uživatelé jiné barevné vzhledy velmi často používají, ale v mnoha případech není web (či jeho části – typicky formuláře) při nastavení jiného schématu čitelný. Náprava je přitom poměrně snadná – při definicích barev definovat barvu popředí a pozadí (nebo oboje nechat nedefinováno).

Pokud to neuděláte, tak dochází k nežádoucímu chování, kdy jedna barva je invertována, ale druhá nikoliv a výsledkem je například černý text na černém podkladu. Ověření skutečnosti, že váš web tímto problémem netrpí, je vyzkoušet si čitelnost a funkčnost webu v dvou nejčastěji používaných schématech (Vysoký kontrast – černá, a Vysoký kontrast – bílá). Příkladem problematického zobrazení při nastavení schématu Vysoký kontrast – černá je například www.justice.cz, kdy při tomto zobrazení jsou velmi obtížně čitelné texty v pravém sloupci a částečně v patičce.

Dodržování zvyklostí při návrhu layoutu

Slabozrací uživatelé kvůli použité softwarové lupě vidí v jednu chvíli jen velmi malou část obrazovky a často proto hledají konkrétní obsah či funkcionality na obvyklých místech stránky. Například vyhledávání je často umístěno v pravém horním rohu. Pokud je dáte jinam, můžete se stát, že je slabozraký uživatel přehlédne a z tohoto důvodu je nebude moci použít. Vhodné je také barevně odlišit navigační části od hlavního obsahu stránky (ideálně výraznou změnou barvy pozadí těchto částí), aby slabozraký uživatel mohl podle tohoto barevného odlišení snadno určit, s kterou částí stránky právě pracuje. Příkladem vhodného řešení může být například www.yourdolphin­.com. Stejně tak je užitečné zachovat stejné rozložení prvků na stránkách v rámci celého webu, aby měl slabozraký uživatel na jednotlivých stránkách usnadněnou orientaci.

Pokračování příště

V dalším díle se budu věnovat často se opakujícím chybám, které komplikují práci uživatelům nevidomým.