Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů

V dnešním díle se zaměříme na chyby, se kterými se na webových stránkách nejčastěji setkávají nevidomí uživatelé. Patří mezi ně žádné či nedostatečné strukturování obsahu webu pomocí nadpisů, nepřístupnost odkazů a ovládacích prvků z klávesnice, CAPTCHA a nepřístupné formuláře.

Nadpisy

Základem moderního pojetí přístupnosti je sémantický kód, v němž výsadní postavení mají korektně vyznačené nadpisy (značky h1 až h6). Praxe je dnes taková, že i kdyby web vyhovoval všem ostatním požadavkům z hlediska přístupnosti, ale nebyl strukturován nadpisy, budou jej nevidomí návštěvníci považovat za obtížně přístupný. Nadpisy slouží nevidomým jako důležité záchytné body body pro přesun na jednotlivé části stránky, po kterých se mohou pomocí funkcí svého screenreaderu rychle pohybovat. Nadpisy také uvozují jednotlivé části stránky a uživatel tedy ví, že to, co je mezi jednotlivými nadpisy, patří z logiky věci k sobě. Proto je velmi důležité, aby nadpisy byly uvozeny všechny důležité části stránky. Tedy nejen hlavní obsah stránky, ale i navigační části, vyhledávání atp.

Všechny nadpisy samozřejmě nemusí být viditelné. Ty, které by nezapadly do designu stránky, lze vhodným způsobem (absolutní pozicování mimo viditelnou oblast stránky) skrýt. Použít lze například následující třídu:

Nastavení screenreaderu
.skryj {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden} 

Důležitá je i hierarchie nadpisů. Na toto téma proběhlo mnoho diskusí a podobně jako u jiných bodů z oblasti přístupnosti, ani zde neexistuje jediné správné řešení. Jedno z vhodných řešení může být například následující strukturování:

  • h1: Logo, název organizace
  • h2: Vyhledávání
  • h2: Hlavní menu
  • h2: Menu sekce
  • h1: Titulek stránky
  • h2 až h6: Strukturování obsahu stránky

Ať už jste nebo nejste příznivci více h1 na stránce, vězte, že nejdůležitější je značky pro nadpisy vůbec použít a hlavní nadpis stránky vyznačit jako nadpis první úrovně.

Hierarchii nadpisů striktně neřeší ani nová metodika WCAG 2.0. Použití značek h1 až h6 pro vyznačení nadpisů je považováno za dostatečnou techniku pro splnění kritéria úrovně A 1.3.1 Informace a vzájemné vztahy, zatímco strukturování obsahu stránky pomocí nadpisů je považováno za dostatečnou techniku pro kritérium úrovně AAA 2.4.10 Záhlaví jednotlivých částí.

Přístupnost z klávesnice

Řada zdravotně postižených návštěvníků webových stránek – nejen nevidomí, ale třeba uživatelé s motorickým postižením horních končetin – používá k ovládání webu výhradně klávesnici. Proto je velmi důležité, aby web byl z klávesnice ovladatelný. Ne vždy tomu tak ale je. Na vině jsou zpravidla nejrůznější typy rozbalovacích menu. Některé z nich nejsou z klávesnice přístupné vůbec (například městská část Praha-Újezd), u některých je z klávesnice přístupná jenom část položek (například Městská knihovna Louny), u jiných jsou z klávesnice přístupné pouze položky na nejvyšší úrovni nabídky, ale k položkám v rozbalené podnabídce už se z klávesnice dostat nedá. Všechny tři situace jsou nepříjemné, protože v lepším případě se uživatel, ovládající web pouze z klávesnice, nedostane jen k některým položkám, v tom horším případě k žádné.

Řešení tohoto problému spočívá v použití takového způsobu navigace, který umožňuje přístup z klávesnice i k položkám z podnabídek. Příklady vhodného řešení mohou být web Města Buštěhrad nebo stránky Města Úštěk. Po potvrzení položky je zobrazena stránka, na níž je obsah nepřístupné podnabídky zopakován a uživatel se tak k ní může bez problémů dostat.

Samostatnou kapitolou jsou pak Rich Internet Application, jejichž přístupnosti se budeme věnovat v dalším článku.

Položka menu rozbalující podnabídku

Navigační strom

Častým problémem jsou také položky menu, po jejichž aktivaci se v navigační části rozbalí další podnabídka. I přesto, že je prezentována textově, může zůstat pro nevidomého návštěvníka utajena, protože se o její existenci nemusí dozvědět (příkladem je řešení, použité na stránkách obce Krásensko). Jak z toho ven? První variantou je zduplikovat odkazy do části s hlavním obsahem stránky. Druhou – šikovnější – je vytvořit na stránce s rozbalenou podnabídkou z položky, která podnabídku rozbalila, nadpis o jednu úroveň nižší, než je nadpis navigační části.

Navigace s rozbalenou větví

Toto řešení je k vidění například na stránkách obce Třebihošť a vyžaduje i sémanticky správné vyznačení navigace jako položek (vnořených) seznamů. V našem příkladu se jedná o odkaz Obec Třebihošť, který je na titulní stránce řadovou položkou nečíslovaného seznamu, ale na stránce Obec Třebihošť se z ní stává i nadpis třetí úrovně, uvozující podnabídku této sekce webu. Nevidomý uživatel pak při procházení stránky po nadpisech zjistí, že mu v navigační části přibyl nadpis a může se pomocí něj velmi snadno na nové položky nabídky dostat. Třetí možností je k položce informaci o podnabídce doplnit – například vhodně skrytým textem či obrázkem s odpovídajícím alternativním textovým popiskem.

Grafická CAPTCHA

Ochrana formuláře pomocí grafické CAPTCHA je další velkou překážkou, na kterou může nevidomý uživatel narazit. I přesto, že už dnes existují nástroje, které mohou grafickou CAPTCHA rozluštit (WebVisum) nebo nabídnout i audio podobu (CAPTCHA API od Seznam.cz), je lepší se tomuto způsobu ochrany formulářů vyhnout a použít raději nějaký jiný. Nabízí se řešení pomocí logické hádanky, případně skrytí editačního pole v kombinaci s vyplňování JavaScriptem.

CAPTCHA

K vidění je toto řešení například na stránkách již zmiňované obce Třebihošť a funguje následovně: k formuláři přidáme pole, do něhož je třeba vyplnit určitou číslici. Tu předvyplníme JavaScriptem a pole následně skryjeme. Uživatel, který má funkční JavaScript, ověřující pole nevidí a správná odpověď se odešle, aniž o tom ví. Pokud je na straně klienta vypnutý JavaScript (tzn. roboti + něco málo návštěvníků), zůstane pole odkryté i s výzvou ke vložení číslice. Uživatel pak číslici zapíše, robot končí. Jedinou potenciální slabinou tohoto řešení je to, že v kódu je uvedena správná odpověď. Dal by se tedy asi napsat robot, který ze zdrojového kódu zjistí, co má vyplnit. To mu však lze zkomplikovat tím, že se do kódu neuvede konstanta (v našem případě „155“), ale výraz, například 150+5.

Co se týká alternativních textových popisků grafických prvků obecně, není dnes již situace tak kritická jako před několika lety, protože grafické prvky se na důležitých místech stránky (hlavní navigace) dnes už tolik nevyskytují. Pravidlo o poskytování textové alternativy pro grafické prvky, nesoucí významovou informaci, samozřejmě v platnosti zůstává, jen už je kvůli odlišnému způsobu tvorby webu mírně upozaděno pravidly aktuálnějšími (sémantika, přístupnost z klávesnice).

Formuláře

I s poměrně komplikovanými formuláři jsou dnes schopni nevidomí uživatelé pracovat. Je ale třeba dodržet několik pravidel, které nevidomým práci s formulářem umožní, případně usnadní. Tím základním je korektní vazba mezi formulářovými prvky a jejich popisky pomocí značky label a vazebních atributů for a id, která zajistí spolehlivou identifikaci toho, k čemu formulářový prvek slouží. Složitější formuláře je vhodné rozčlenit do skupin pomocí značek fieldset a legend. Ke správně vytvořenému formuláři dnes také patří upozornění na povinnou položku v textové podobě (ideálně umístěné před prvkem a jako součást jeho popisku) a ošetření chyb při zadávání údajů formuláře.

Závěrem této části bych se rád zmínil o formuláři pro vyhledávání. Trendem poslední doby je formulář pro vyhledávání umísťovat na stránky v podobě: editační pole a tlačítko pro potvrzení. Pro běžného uživatele může být tato forma dostačující, pro uživatele handicapovaného už nikoliv. K editačnímu poli je proto vhodné doplnit vhodně skrytý popisek, který může současně sloužit i jako nadpis části pro vyhledávání. Příklad vhodně řešeného formuláře pro vyhledávání najdete například na stránkách obce Petrovice.

Závěr

Problémů, na které nevidomí uživatelé na stránkách narážejí, je samozřejmě daleko více. Tento článek si nečiní nárok být úplným výčtem všech problematických částí, zaměřil jsem se na ty chyby, se kterými se při našich testech setkáváme opakovaně. Příště se podíváme na pole zatím takřka neprobádané, a tím je přístupnost RIA aplikací.

Radek vystudoval informatiku na Fakultě informatiky Masarykovy univerzity v Brně. Od roku 1998 se věnuje speciální informatice pro lidi s těžkým postižením zraku.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 45

Přehled komentářů

Anonym Sice hezke...
Petr Ferschmann Re: Sice hezke...
benzin Re: Sice hezke...
Martin Hassman Re: Sice hezke...
Jarda Re: Sice hezke...
Anonym Re: Sice hezke...
Martin Hassman Re: Sice hezke...
Anonym Re: Sice hezke...
Martin Hassman Re: Sice hezke...
Radek Pavlíček Re: Sice hezke...
Sniper Re: Sice hezke...
Anonym Re: Sice hezke...
Hoween Re: Sice hezke...
webkodérčuně Re: Sice hezke...
qazasd http://www.ippi.cz
Martin Hassman Re: http://www.ippi.cz
Anonym Re: http://www.ippi.cz
Radek Pavlíček Re: http://www.ippi.cz
Sniper Re: http://www.ippi.cz
Ifo Absolutní pozicování pro skrývání prvku?
Radek Pavlíček Re: Absolutní pozicování pro skrývání prvku?
Ifo Re: Absolutní pozicování pro skrývání prvku?
Martin Hassman Re: Absolutní pozicování pro skrývání prvku?
xurpha Re: Absolutní pozicování pro skrývání prvku?
Martin Hassman Re: Absolutní pozicování pro skrývání prvku?
alt Re: Absolutní pozicování pro skrývání prvku?
Radek Pavlíček Re: Absolutní pozicování pro skrývání prvku?
Anonym Re: Absolutní pozicování pro skrývání prvku?
Sniper Re: Absolutní pozicování pro skrývání prvku?
Marv Re: Absolutní pozicování pro skrývání prvku?
Martin Hassman Re: Absolutní pozicování pro skrývání prvku?
Anonym Re: Absolutní pozicování pro skrývání prvku?
Martin Hassman Re: Absolutní pozicování pro skrývání prvku?
petr_p Úrovně nadpisů
Radovan Re: Úrovně nadpisů
Jan Mikula SEO vs přístupnost
MProkop Re: SEO vs přístupnost
Radek Pavlíček Re: SEO vs přístupnost
Peter Kahoun RE: Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů
Radovan RE: Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů
Peter Kahoun RE: Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů
Radek Pavlíček RE: Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů
ja RE: Nejčastější chyby v přístupnosti z pohledu nevidomých uživatelů
Hosti Titulek
Radek Pavlíček Re: Titulek
Zdroj: https://www.zdrojak.cz/?p=2963