Časté problémy v přístupnosti webů, mobilních aplikací

Zrakově hendikepovaní lidé pracují s moderními technologiemi prostřednictvím odečítače obrazovky nebo-li čtečky. Jde o funkci, která prostřednictvím hlasového výstupu předčítá vše, po čem se pohybuje kurzor ať už na dotykovém displeji chytrého telefonu, monitoru PC. Samotná čtečka pro zvládnutí některých úkonů ovšem nestačí. Aby s některými nástroji mohli lidé se zrakovým znevýhodněním pracovat, musí přiložit ruku k dílu i vývojáři samotných mobilních aplikací či webových rozhraní.

Čtečka si dokáže poradit s řadou prvků, nicméně pokud jednotlivé prvky nejsou správně otagované, má problém s jejich vyčtením. A člověk bez zrakové kontroly, se pak snadno ztratí. Pokud vývojáři nedbají na přístupnost svých nástrojů, mobilních aplikací či webových rozhraní, může člověk se zrakovým hendikepem používat sebelepší čtečku, ale když vývojáři nedodržují základní pravidla, čtečka je v podstatě k ničemu. Ani si neškrtne.

Čtečka je totiž pouhou softwarovou funkcí, která má určité meze. Ne vždy si tato funkce dovede poradit s vytvořenou webovou stránkou nebo mobilní aplikací. I když hotový projekt po designové stránce vypadá úchvatně, čtečka může mít potíže s jeho ovládáním. Ať už pouze proto, že nedokáže rozpoznat a hlasovým výstupem interpretovat některé z prvků jako např. názvy odkazů, tlačítek, přepínačů či textových políček, nebo jsou některé dialogy pouze vizuální či není jednoduché se v uživatelském rozhraní jen se čtečkou, vůbec zorientovat.

V rámci oblasti přístupnosti bývají mnohdy řešeny banality, které nenapadne osoby bez zrakového znevýhodnění řešit, protože to nepovažují za nutné, ale lidem se zrakovým handicapem mohou nesmírně pomoci.

Přístupnost se snažím řešit několik let. Nejsem sice takový machr, jako kolega Radek Pavlíček, který se této oblasti věnuje již od devadesátých let, ale protože já sám jsem zcela zrakově hendikepován, neobejdu se bez čtečky. A když s touhle funkcí pracujete denně, chtě nechtě postupně zjistíte, v čem tkví v oblasti přístupnosti nejzásadnější problémy. Vytvořil jsem si takovou drobnou osnovu, několik bodů, podle kterých se řídím. A zatím to stačilo. Dovolte mi vám tuto osnovu nastínit včetně vysvětlení jednotlivých bodů.

Než přejdeme k základním bodům přístupnosti, na které se zaměřuji, objasním ještě pojem čtečka. Správně má jít o odečítač obrazovky, ale čtečka se tak nějak víc zažila v hovorové mluvě. Když řeknete odečítač obrazovky, lidé nechápavě kroutí hlavou. Když ovšem uslyší čtečka, vnímají tohle označení jako skutečnost, že jde o funkci, která něco předčítá. A ona je to v podstatě pravda. Tak proto píšu čtečka a ne odečítač obrazovky. Ono když i vývojářům řeknete čtečka, zjistíte, že už o této funkci něco někdy slyšeli. Ale pojem odečítač obrazovky je pro ně zcela neznámý. A nyní už ke slíbené osnově přístupnosti.

Struktura a orientace

Nejzákladnější pravidlo přístupnosti vůbec. Pokud již vytváříte jakýkoli projekt ať už jde o webové rozhraní či mobilní aplikaci, dbejte na strukturu. I samotná čtečka umí filtrovat jednotlivé prvky a vyloženě mezi nimi přeskakovat. Pokud váš projekt obsahuje tyto prvky, ulehčíte orientaci v uživatelském rozhraní také lidem se zrakovým hendikepem. Zaměřujte se na:

  • Členění jednotlivých sekcí a částí do nadpisů
  • Rozdělení sekcí prostřednictvím samostatných kartiček, panelů. Třeba podobně, jak je členěna aplikace Telefon na iPhonu. Panel historie, kontakty, oblíbené apod.
  • Můžete též přidat tak zvané orientační body, podle kterých umí čtečka též filtrovat

Čitelnost a rozeznatelnost prvků

Druhá nejzásadnější oblast, která by rozhodně neměla být opomenuta. Myslete na to, že aby bylo vůbec možné se čtečkou s vaším nástrojem, webem či mobilní aplikací pracovat, musí být jasné, který prvek je který.

Tím myslím, že pokud správně neotagujete jednotlivá tlačítka, přepínače, textová políčka a další, čtečka se v nich ztratí. Zaměřujte se na:

  • Dávejte prvkům správné elementy. Text area, button, checkbox atd.
  • K jednotlivým prvkům přidávejte textové label popisky. Grafické ikonky nestačí.
  • K obrázkům vkládejte atribut alt, jinak čtečka obrázek vůbec nenajde, nepřečte a bude jej úplně ignorovat. Což ne vždy je dobré, zvláště, když jde třeba o klikatelný odkaz. Stačí, když atribut alt bude obsahovat nejvýstižnější označení obrázku, jedno, dvě slova
  • Přepínače opatřete textovým atributem, je-li přepínač vybrán, nevybrán, zvolen, nezvolen

Pokud nedodržíte první bod, čtečka nepozná rozdíl mezi jednotlivými prvky, elementy. Co je bráno jako textové pole, přepínač, tlačítko atd. Zrakově hendikepovaný člověk tím pádem na žádný prvek neklikne, protože mu bude připadat, že tam buď daný prvek vůbec není, nebo ho čtečka vyčte pouze jako text. A to je rozhodně špatně.

Při nedodržení druhého bodu zajistíte, že se člověk se zrakovým znevýhodněním, ztratí. I kdyby nakrásně jednotlivé prvky byly zařazeny do správné skupiny elementů tlačítek, přepínačů apod., bez textových label popisků čtečka nepozná, k čemu má dané tlačítko, přepínač nebo textové pole sloužit. Vyčte pouze označení tlačítko, přepínač, textové pole. A když zavřete oči a zkusíte se v takovém rozhraní pohybovat jen se čtečkou, ztratíte se taky. Protože nebudete vědět, na čem jste.

Pokud opomenete třetí bod, bez zrakové kontroly nelze vůbec odhalit obrázky. A to není dobré zvláště, když se v obrázku ukrývá nějaká podstatná informace, nebo když obrázek obsahuje logo či informaci o sponzorství daného nástroje či mobilní aplikace. Nebo též i důležitý klikatelný baner, který vás přesměruje do určité sekce.

Když nedodržíte čtvrtý bod, zrakově hendikepovaný člověk nepozná, jestli se mu podařilo některý z přepínačů vůbec zvolit a tím pádem změnit chování některé části aplikace, či u objednávky zaškrtnout zapamatovanou kartu, volbu platby, aplikování slevy z kreditů atd.

Pro příklad uvádím několik situací:

Situace č. 1.

Aplikaci máte rozčleněnou do několika kartiček, panelů. Panely obsahují správný element, takže jde se čtečkou poznat, že jde o panel, chybí jim ale textové label popisky. Když se mezi jednotlivými panely pohybujete se čtečkou, slyšíte jen panel, panel, panel. Máte-li takových panelů třeba rovnou pět vedle sebe a každý panel označuje jednu sekci, nemáte se čtečkou šanci poznat, co který panel znamená.

To samé platí i u textových políček bez label popisků. Představte si, že jste v mobilním bankovnictví a chystáte se odeslat platbu. Máte vyplnit standardní údaje. Číslo účtu, kód banky, předčíslí, částku, variabilní symbol a další. Jenže ouha. Textová políčka sice máte zobrazená, ale ani jedno z nich neobsahuje textový label popisek. Pohybujete se kurzorem s aktivní čtečkou a slyšíte jen textové pole, textové pole, textové pole. A nyní mi řekněte, kam co vepsat? Které pole slouží pro předčíslí, číslo účtu, kód banky, částku apod. Nevíte že? Není divu.

Procházíte mobilní aplikaci. Objevujete její jednotlivé funkce a během procházení narazíte na prvek označený pouze jako tlačítko. A nedej bože, když je takových prvků s označením pouze tlačítko víc. Víte sice, že jde o tlačítka a že půjdou nejspíše potvrdit, ale co se stane? Nesmaže se něco nebo neodešlu nějaký požadavek? Zase problém, chybí textový label popisek.

Situace č. 2.

Procházíte mobilní aplikaci s aktivní čtečkou. Vše se chová tak nějak divně. Buď čtečka nečte vůbec nic a působí vyloženě zaseknutě nebo veškeré informace čte jen jako text. Jste ztraceni, protože ani jeden z prvků v aplikaci nemá přiřazený vhodný element. Tím pádem nezjistíte, co má být tlačítkem, přepínačem, rozbalovacím meníčkem. Přesto, když potvrdíte nějakou textovou informaci, otevřete menu, odešlete požadavek, rozevře se nabídka pro přihlášení. A to je špatně. Každý prvek by měl mít přiřazen jemu odpovídající element.

Situace č. 3.

Objednáváte zboží a dostáváte se do sekce objednávky, konkrétně na způsoby platby. Ty jsou řešeny prostřednictvím zaškrtávacích přepínačů. Též je zde možnost, využít slevu v podobě kreditů. Můžete si zvolit, jestli slevu aplikujete nebo ne. Listujete mezi jednotlivými možnostmi, potvrdíte příslušný přepínač, který má přiřazený vhodný element. Jenže ouha. Přepínač sice potvrdíte, ale čtečka nehlásí, jestli je zvolen, vybrán, nebo nevybrán. Vizuálně vidíte, že je zaškrtnutý a zvolen, se čtečkou ne. Nemáte tím pádem jak zjistit, který způsob platby máte aktuálně vybrán a zda-li dojde k uplatnění případné slevy. Chybí textový atribut hlásající status takového přepínače. To je též špatně.

Ovladatelnost, zobrazování informací

Poslední dva body, na které se v rámci kontrolování přístupnosti zaměřuji, můžeme klidně vstrčit do jedné sekce tohoto článku. Nenapíšu o nich totiž mnoho, ale jsou též nesmírně důležité.

Ovladatelnost mi říká, co jsem schopen se čtečkou v mobilní aplikaci nebo na webu zvládat, co ne. Jednoduše projdu celou aplikaci a zkoumám, zda-li jsou jednotlivé prvky ovladatelné, srozumitelné, zda-li mi poskytnou požadované informace třeba o názvu textového pole, zaškrtnutém přepínači atd.

Bodem zobrazování informací zase zjišťuji, jestli se po potvrzení jednotlivého prvku, přepínače, přeskoku na dané textové políčko dozvím informaci, kterou potřebuji. A též, jestli se při potvrzení daného prvku stane skutečně to, co se stát má. A zda-li čtečka vyčte správnou informaci.

Projekt musí mýt celkový dopad na společnost

Přístupnost rozhodně není otázkou několika málo minut. Aby byl projekt skutečně ovladatelný i pro čtečky obrazovek, musí se detailně zkontrolovat a otestovat sekce po sekci, prvek po prvku, funkce po funkci. Jednoduchý nástroj zvládnu ozkoušet do několika málo dnů. Rozsáhlé projekty, jako je např. mobilní či internetové bankovnictví, přepravní zásilkové společnosti, dopravci, e-shopy atd., do několika týdnů, či měsíců.

Pokud si člověk ale dá tu práci a přístupnost zkoumá fakt pečlivě, ve výsledku má jednak radost z odvedené práce, a druhak přístupným projektem otevře zase zrakově hendikepovaným bránu do společnosti. A to se rozhodně vyplatí.

Pravdou je, že nezkoumám v oblasti přístupnosti jakýkoli projekt. To bych nedělal nic jiného, protože přístupnost fakt zabere čas. Vybírám si jen ty projekty, ve kterých já osobně vidím smysl. A o kterých vím, že budou mít celkový dopad na společnost, tím pádem mohou být užitečné i pro osoby se zrakovým znevýhodněním.

Zpřístupněné projekty

  • Mobilní aplikace Záchranka
  • Liftago Taxi
  • Fakturoid
  • Air Bank, mobilní aplikace
  • Dáme jídlo, mobilní aplikace
  • Twisto, mobilní aplikace
  • RB Klíč, mobilní aplikace

Aktuálně řešené projekty

  • Regiojet
  • Přepravní služba Zaslat

Podrobné informace o všech řešených, ale i procentuální přístupnost jednotlivých projektů, najdete na oficiálním webu společnosti GiebHelp servis s.r.o. v sekci projekty.

Zobrazit web GiebHelp servis

Karel Giebisch

Karel Giebisch

CEO portálu GiebNews. Zrakově znevýhodněný IT specialista, masér, bojovník za inovace. Mým velkým cílem je začlenit osoby s hendikepem do běžné společnosti a dokázat, že znevýhodnění ať je jakékoli, není překážkou. Mám rád výzvy a jsem neustále otevřen novým příležitostem.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *