Myslíte pri UX aj na nevidiacich? Otestujte si, či sa váš web dá ovládať z klávesnice

Možno ste nadobudli pocit, že váš web je dokonale prehľadný, zrozumiteľný a navyše pekný. A my nechceme tvrdiť, že to tak nie je. Dokázali by ste sa však na ňom pohybovať aj vtedy, ak by ste zatvorili oči? A uvažovali ste vôbec niekedy nad tým, že váš web navštevujú aj ľudia bez zraku? Práve na skupinu nevidiacich a slabozrakých užívateľov totiž dizajnéri pri tvorbe webstránok často zabúdajú. Poďme to zmeniť.

V záujme pochopiť potreby nevidiacich a slabozrakých užívateľov webstránok sme sa s našimi otázkami obrátili na IT administrátora a inštruktora sociálnej rehabilitácie Jána Podolinského z Únie nevidiacich a slabozrakých Slovenska.

Keďže on sám je už niekoľko rokov nevidiacim užívateľom, ktorý dokonca vyučuje klientov únie, ako majú používať weby a aplikácie, veríme, že jeho postrehy a skúsenosti pomôžu rozšíriť povedomie o tom, ako sa má robiť kvalitné UX. Teda také, ktoré pomáha tvoriť prístupné stránky skutočne pre všetkých.

Tisícky klientov únie nevidiacich chcú byť online

O tom, že túto problematiku neriešime iba tak, hovoria čísla. Podľa Jána Podolinského má totiž iba Únia slabozrakých a nevidiacich Slovenska priemerne 4200 klientov, z ktorých chcú prakticky všetci využívať internet. Služby únie pritom využívajú aj ďalší ľudia, ktorí nie sú členmi.

„Práve to im totiž otvára možnosti k prísunu informácií. Viete, keď ľudia, ktorí počas života normálne videli, náhle prídu o zrak, berú to veľmi ťažko a často to sprevádza až depresia. No práve to, že si sami dokážu zapnúť počítač a samostatne si vedia dohľadať informácie, to je pre nich veľká vzpruha,“ hovorí Podolinský.

Podľa Svetovej zdravotníckej organizácie (WHO) tvoria ľudia so zrakovým postihnutím približne 5 % populácie.

Webstránky cez čítač obrazovky

Ako je však vôbec možné, že nevidiaci človek dokáže používať internet a vnímať obsah webstránok? Aj tu zohráva veľkú rolu technologický progres. Nevidiacim užívateľom totiž obsah webstránok čítajú aplikácie známe ako čítače obrazovky.

„Sú to aplikácie, ktoré užívateľom prostredníctvom hlasu sprístupňujú zobrazovaný obsah na monitore. Na základe príkazov z klávesnice teda viem tejto aplikácii povedať, čo všetko mi má prečítať – napríklad, teraz mi prečítaj názov, teraz mi prečítaj menu, teraz mi prečítaj prvý odstavec, druhý odstavec, teraz ma posuň v čítaní o nadpis nižšie, o druhý nadpis nižšie,“ rozpráva o používaní aplikácie Ján Podolinský.

Aby však čítač dokázal bez problémov prečítať obsah webstránky nevidiacemu užívateľovi, musí sa dať táto webstránka bez problémov ovládať z klávesnice. Ak je to tak, po niekoľkých návštevách tej istej stránky sa dokáže nevidiaci na webe pomocou čítača zorientovať dokonca oveľa rýchlejšie ako vidiaci človek.

Na čo teda myslieť pri UX webstránok so zreteľom na nevidiacich užívateľov?

V nasledujúcich 10 bodoch sme zhrnuli najdôležitejšie a do značnej miery aj jednoduché tipy k prístupnosti webstránok, ktoré dokážu byť pre nevidiacich naozaj veľmi nápomocné.

Tu sú:

1. Dodržiavajte vyhlášku Ministerstva financií SR

Jedným z najdôležitejších bodov prístupnosti webstránok je dodržiavanie vyhlášky Ministerstva financií SR o štandardoch pre informačné systémy verejnej správy.

„V tejto vyhláške je presne popísané, čo všetko majú jednotlivé prvky webstránok obsahovať a čo majú mať vyplnené. Ak by sa táto vyhláška dodržiavala, naša skupina by na internete nemala problém,“ vysvetľuje Podolinský.

2. K obrázkom a grafom pridávajte zrozumiteľné popisy

Častým problémom pre nevidiacich bývajú chýbajúce či nezrozumiteľné popisy obrázkov a grafov umiestnených na webstránkach. Určite nám dáte za pravdu, že popis fotky typu DSCXY10245 zrejme nevidiacemu užívateľovi veľa o obsahu obrázku nenapovie.

Aj preto všetkým fotografiám, ilustráciám a dôležitým grafickým prvkom priraďte pomocou atribútu alt zrozumiteľnú textovú alternatívu.

Čo však v prípade, že pôjde o fotogalérie či grafy, ktoré si bez vizuálu vyžadujú dlhšie textové vysvetlenie? Riešení je niekoľko.

Buď k nim môžete pridať popis vo forme krátkeho článku, alebo formou tabuľkových dát. Naopak, ku grafike, ktorá slúži iba na dekoráciu, priraďte prázdny atribút alt.

3. Označujte nadpisy a podnadpisy

Zrozumiteľná a prehľadná štruktúra nie je dôležitá len z hľadiska ľahšej čitateľnosti obsahu pre vidiacich, ale aj pre účely čítača obrazovky.

Podľa Jána Podolinského by malo byť samozrejmé najmä označovanie nadpisov: „Obsah by mal byť vymedzený nadpismi, pričom nadpis by mal byť urobený ako nadpis, teda označený tagom h. Zväčšené a zvýraznené písma nestačia, pretože mne to čítačka povie iba ako obyčajný text, kvôli čomu sa potom neviem klávesovou skratkou pohybovať v texte.“

Nadpisy preto vždy označujte značkami h1 až h6, zoznamy značkami ul, ol, li, dl, dt a dd a taktiež odstavce značkou p.

Ak by ste sa pritom v prístupnosti chceli posunúť ešte o úroveň vyššie, využiť môžete aj orientačné body WAI-ARIA, ktoré ponúkajú tvorcom stránok možnosť priradiť k jednotlivým sekciám webstránky informáciu o tom, akú majú na webe rolu.

4. Skúste si, ako viete ovládať web bez použitia kurzora myši

Na predchádzajúci bod plynule nadväzuje aj takzvaná „skúška správnosti“ prístupnosti webstránky, ktorou je prejdenie si webu z klávesnice.

Podľa Podolinského by sa totiž prístupná stránka mala dať celá obslúžiť bez použitia myši. „Je to jeden z najzákladnejších princípov, ktorý vo sfére prístupnosti webstránok je. Ak si teda aj vidiaci človek sadne za počítač a dokáže klávesnicou prejsť po všetkých aktívnych prvkoch webstránky v zmysluplnom poradí, webstránka je plne prístupná.“

5. V e-shopoch myslite na detailné popisy produktov

Tak ako pri bežných webstránkach a informačných portáloch, na prístupnosť treba myslieť aj pri e-shopoch. Aj nevidiaci užívatelia totiž nakupujú tovar online.

Mimoriadne dôležitú rolu preto v tomto prípade zohrávajú popisy, na ktoré by sa malo myslieť minimálne rovnako, ak nie dokonca viac ako na fotografie produktov.

Ján Podolinský uviedol príklad: „Nedávno som si kupoval mobilný telefón a keď som si pozeral ponuku e-shopov, nestačil mi iba obrázok, názov a informácia, že ide o nový dizajn. Potreboval som úplné detailné parametre. Šírku, výšku, rozmery telefónu, umiestnenie tlačidiel... Skrátka, čím detailnejší je popis, tým lepšiu mám predstavu o danom produkte.“

To isté platí aj pri oblečení. Namiesto stručného popisu o tom, že e-shop predáva žlté tričko s kvetinovým vzorom, uveďte tiež informácie o tom, aký výstrih má toto tričko a na koľkých percentách oblečenia je vzor umiestnený. Napríklad – tričko má výstrih V a vzor je umiestnený na 60 % prednej strany.

6. Vytvorte väzbu medzi prvkom a popiskom pri formulároch (label)

Tabuľky, editačné polia a formuláre musia mať priradený takzvaný label, aby sa pri prechode čítača na textové pole ozval len názov textového poľa.

„Label sa dá cez atribút ID priradiť k textovému poľu – má v sebe atribút ID, rovnako ako textové pole má atribút ID, vďaka čomu sa textové polia spárujú. Čítač, ktorý to prechádza, to následne dokáže rozpoznať a prečíta príslušný label k textovému poľu. Label teda urobí iba textový reťazec. Čiže, dáte label, naplníte ho atribútmi, dáte text a uzavriete ho. Textové pole tak spáruje vnútorný atribút HTML tagu s label-om, vďaka čomu je to čitateľné pre čítač. Podrobne popísané to nájdete aj vo vyhláške,“ objasňuje tvorbu textového reťazca Podolinský.

7. Odkazy v texte dostatočne odlíšte

Pre nevidiacich a rovnako pre slabozrakých je náročné rozpoznať odkaz v texte od ostatného textu, ak nie je dostatočne odlíšený. Farebné zvýraznenie modrou farbou v tomto prípade stačiť nebude.

Ideálne preto je, ak odkazy odlíšite od okolitého textu podčiarknutím. Vyhnite sa zároveň zaužívaným odkazom typu „tu“ či „viac“ a uprednostňujte radšej typy odkazov, ktoré popisujú to, kam smerujú.

8. Vzdajte sa vyskakovacích okien

Pre zrakovo postihnutých užívateľov sú veľmi nepopulárne aj vyskakovacie okná, známe ako „pop-upy“. Koniec koncov, ak sú zle nastavené a otravujú pri prezeraní webstránky, tak sú rovnako neobľúbené aj pre vidiacich užívateľov. A to je dostatočný dôvod na to, aby majitelia webstránok zvážili ich odstránenie.

„Webstránka by nemala obsahovať žiadne vyskakovacie alebo plávajúce okná, pretože narúšajú celý proces,“ upozorňuje Podolinský.

Ak však chcete pomocou vyskakovacích okien zvýšiť predaj a máte istotu, že vašu webstránku nenavštevujú nevidiaci či slabozrakí používatelia, vyskakovacie okná môžete aplikovať aj takým spôsobom, aby návštevníkov neotravovali. Ako? O tom sa viac dočítate v tomto článku.

9. Nevytvárajte zbytočne zvukovú verziu stránky

Prístupnosť webstránok si rozhodne netreba vysvetľovať po svojom bez predošlej konzultácie s cieľovou skupinou alebo dostatočného informovania sa o tejto problematike.

Často sa totiž stáva, že dizajnéri v záujme pomôcť nevidiacej skupine užívateľov vytvárajú zvukové verzie webstránok či ich osobitné textové verzie, čo je nielen zbytočné, ale často aj komplikované. Ján Podolinský rozprával aj o takejto skúsenosti:

„Ako príklad uvediem situáciu, keď si dizajnéri takpovediac urobili po svojom. Snažili sa totiž sprístupniť stránku nevidiacim a slabozrakým užívateľom takým spôsobom, že na ňu umiestnili tlačidlo „prečítať“ alebo „zväčšiť písmo“. Tvorcovia takýchto stránok sa však vôbec neporadili s cieľovou skupinou. Ich aplikácia pojmu prístupnosti totiž napokon nevidiacemu užívateľovi len prečíta celú stránku bez možnosti, aby si sám mohol vybrať, či pôjde na ďalší odstavec o niekoľko riadkov nižšie, alebo prejde na inú sekciu, keď ho tá, na ktorej sa aktuálne nachádza, nezaujíma.“

Snaha pomôcť sa tak mení len na zbytočnú prácu navyše.

„Viete, my preferujeme prístup, keď existuje len jedna verzia webstránky, a to stránka štandardná, ktorá sa používa aj pre používateľov, ktorí vidia. Chodíme na štandardné stránky. Nechceme, aby sa robili zvlášť stránky pre nevidiacich, lebo je to zbytočné. Tá technológia, ktorá dnes existuje, totiž umožňuje, aby nám bola prístupná akákoľvek stránka,“ dopĺňa svoj názor na tvorbu prístupných webstránok Ján Podolinský.

Summa summarum

Na základe všetkých vyššie uvedených faktov i skúseností teda môžeme zhodnotiť, že dizajn by pri tvorbe webstránok nikdy nemal byť považovaný za dôležitejší ako štruktúra a obsah.

Pretože vaše webstránky skutočne navštevujú aj nevidiaci užívatelia, ktorí síce nedokážu oceniť dizajn a farebné prevedenie vášho webu, avšak dokážu oceniť, aký pútavý, prehľadný a zrozumiteľný obsah na ňom máte.

Ďaľšie pravidlá