Přístupnost webu (web accessibility) je soubor pravidel, která zajišťují jeho správné zobrazení, lidově řečeno – i pro lidi s horším zrakem či nevidomé nebo na různých zařízeních. Více k tématu Přístupnost webu i o službách, které v této oblasti nabízíme: audit webu, poradenství, úpravy kódu… v sekci Strategie – článek: Přístupnost webu (web accessibility).

Jak prohlížejí obsah webu nevidomí či jinak zrakově postižení

Zákon č. 99/2019 Sb. ze dne 20. března 2019 byl nazván jako Zákon o přístupnosti internetových stránek a mobilních aplikací. Týká se upravení nastavení především státních webů tak, aby se na nich mohli snadno orientovat také slabozrací a nevidomí. Jen v Čechách se přístupnost webů týká téměř 3 milionů seniorů a 100 000 slabozrakých a nevidomých lidí. Díky správnému naprogramování přístupnosti webu bude mít možnost v nich lépe číst také 9 % mužů s poruchou barvocitu.

Co potřebují nevidomí, aby bylo v HTML dobře vyřešené

Protože se při naší práci snažíme vžít do potřeb našich klientů, oslovili jsme slabozrakou ženu, aby nám přiblížila potřeby slabozrakých a nevidomých spoluobčanů.

Dozvěděli jsme se, že k prohlížení webů používají tzv. odečítač. Jedná se o hlasovou čtečku, která se ovládá pomocí klávesových zkratek. Zrakově postižení od nás tvůrců webových stránek tedy potřebují především dokonale přehledný a správně seřazený HTML kód včetně tagů (H1–H6, P a dalších).

Nevidomí a slabozrací potřebují, aby veškerá tlačítka a další ovládací prvky, jako je třeba zaškrtávací políčko pro souhlas s obchodními podmínkami, měly popisky. Nestačí mít text pouze před inputboxem, ale popisek musí být přímo v něm. Zkrátka jde o to, aby čtečka mohla úplně všechno klientovi přečíst.

Kromě toho je velice důležité také mít naprosto výstižné názvy v menu a dokonalou přehlednost celého menu a jednoznačnou návaznost na další podkategorie menu. Zrakově postižení mají největší problémy se orientovat v e-shopech. Tam bývá zařazení produktů a názvy v menu často nejasné a mohou snadno způsobit zmatenost a neschopnost pokračovat dál.

Není žádoucí využívat nadbytečné efekty pomocí Javascript. V praxi totiž slabozrací zvětšují utility, které na rozdíl od standardního internetového/webového prohlížeče (browseru) umožní zvětšit jenom určitou část webu. Pomocí klávesových zkratek se potom ve zvětšeném obsahu mohou dobře pohybovat. Kvůli tomu je potřeba mít texty napsané v HTML kódu postupně odstavec po odstavci, aby když použijí zkratku pro zobrazení dalšího odstavce nedošlo k zobrazení špatného textu. V HTML je potřeba mít pořádek, aby se nemohl zaměnit zobrazovaný obsah nebo aby čtečka nečetla něco úplně jiného, než by měla.

Co na webu vyžadují slabozrací lidé

Pro slabozraké je nejdůležitější dobrý kontrast, snáze přečtou bezpatkové písmo. To znamená písmo bez tzv. kudrlinek. Používá se písmo Arial a Tahoma. Grafika by měla být co možná nejjednodušší. Vyvarovat bychom se měli také nadbytečných obrázků. Pro zrakově postižené volíme na web jen ty nejzákladnější informace, menu zbytečně nerozvětvujeme.

Co je důležité, aby odečítač pro nevidomé web správně přečetl

Správné fungování závisí na kompatibilním softwaru. Zrakově postižení používají například JAWS a NVDA screen readery (odečítače).

Společnost Apple nabízí integrovanou čtečku obrazovky VoiceOver. Existují video a audio kurzy, kde se postižení mohou naučit, jak mobilní telefon ovládat gesty přes aplikaci VoiceOver.

Tyto kombinace odečítačů a prohlížečů používají sami zrakově hendikepovaní:

• Android: TalkBack s Chrome nebo Firefoxem
• Windows: NVDA s Firefoxem
• Windows: JAWS s Internet Explorerem
• iOS: VoiceOver se Safari
• macOS: VoiceOver se Safari

Využívá se velké množství klávesových zkratek. Například je někdy potřeba nejprve aktivovat automatický Dolphin kurzor. Zapíná a vypíná se stiskem levého Ctrl + 4 (č). Teprve potom je možné se po prvcích určitého typu pohybovat dalšími klávesami. Samotnými klávesami se přesouvá na další prvek a kombinací klávesy a Schift se vrátí zpět na předchozí prvek.

Pro vyhledávání nadpisů se většinou používá H, pro odkaz K, písmeno B vyhledá tlačítko a X zaškrtávací políčko. Pohyb přes všechny objekty a text v okně uživatelé ovládají šipkami nahoru a dolů. Plynulé čtení se spouští na numerické klávesnici stiskem klávesy Plus. Také je možné libovolně přeskakovat odstavce. Některé programy nabízí i funkci zrychlení nebo zpomalení hlasového projevu.

Jak mohou zrakově postižení přehrávat videa

Aby si zrakově handicapovaní lidé mohli užívat také videa, je potřeba mít dobře popsané všechny ovládací prvky, aby je čtečky mohly přečíst. Jedná se především o tlačítka Play, Pause, Zpět a Zavřít video. YouTube má tohle docela dobře zmáknuté, Český rozhlas celkem slušně zvládá podcasty, ale mohl by na dalších popiscích ještě zapracovat.

Jak je to s vyplňováním formulářů a ochranou proti spamu formou Image CAPTCHA u web accessibility

Je přece jen potřeba odlišit skutečné uživatele od automatických skriptů a robotů. Aby mohl být odeslán internetový formulář, musí uživatel zadat u obrázku CAPTCHA náhodný řetězec. Určitě se s tím každý z nás někdy už setkal, že po něm bylo požadováno přepsání kombinace písmen a číslic nebo vepsání primitivního součtu. Pokud nevidomý nebo i slabozraký člověk narazí při prohlížení webu na Image CAPTCHA, dostane se do slepé uličky, protože tohle ani jeho chytrá čtečka nemá šanci rozluštit.

Další problém může nastat při vyplňování formulářů především v e-shopech, kde je potřeba zaškrtnout políčko Souhlasím s obchodními podmínkami. Když chybí popisek, klient nepozná, o co se jedná, a nemůže pokračovat dál. V takovém případě se většinou majitel webu zbytečně připraví o téměř dokončenou objednávku.

Popisky u jednotlivých prvků na webu nazýváme anotace. Jedná se o pomocnou nebo dodatečnou informaci, která je pro zrakově postižené klíčová k pochopení jednotlivých částí. Když bychom nepopsali všechno, postižený návštěvník by se na webu ztratil nebo by zkrátka nemohl pokračovat dál, protože by mu chyběly správné údaje.

Mohlo by vás také zajímat:

• Testování přístupnosti webu: doporučené kombinace screen readeru a prohlížeče
• Screen readery
• VoiceOver

Nebo už výše zmíněný článek v sekci Strategie: Přístupnost webu (web accessibility)

Případně nás můžete kontaktovat a domluvit se s naším odborníkem.