Ako prispôsobiť webstránku pre zrakovo a inak postihnutých

Oslovte viac zákazníkov cez dobre navrhnutú stránku pre zrakovo postihnutých návštevníkov. Čo znamená prístupnosť (accessibility) pri webstránke? Ako začať rozmýšľať pri vylepšovaní stránky a zlepšovaní jej použiteľnosti?

Štatisticky 15% zo všetkých ľudí má nejaké postihnutie. Vo svete je to viac ako miliarda ľudí.

Zistite viac o rôznych druhoch postihnutia, aby ste mohli navrhnúť webstránku alebo výrobok, ktorý môže pomáhať ešte viac zákazníkom.

Príklady

Možná máte zákazníka, ktorý sa spolieha na program, ktorý mu prečíta obsah vašej stránky.

Možná máte firmu, ktorá vyrába papierové a digitálne pozdravy a blahoželania. Každý pozdrav má veselý, vtipný alebo dojemný odkaz, lepší ako vaša konkurencia.

Jedného dňa v praxi zistíte, že vaše produkty vôbec neoslovia ľudí so zrakovým postihnutím. Nemôžu si prečítať vaše kreatívne pozdravy, nemáte z nich zákazníka a vaše produkty im vôbec neposlúžia.

Ak si správne nastavíte webstránku, aby spolupracovala s napr. čítačkou obrazovky, niekto s poruchou zraku môže vašu stránku a pozdrav prečítať a použiť.

Niektoré prvky prístupnosti používajú všetci

Možná si ani neuvedomujete, ako často používate v bežnom živote prvky prístupnosti. Tlačíte kočík po rampe pre vozíčkarov, sem tam mrknete na titulky na YouTube alebo v reklamách MHD, používate vibrovanie namiesto zvonenia počas porady, aj na webstránke môžu prvky prístupnosti pomôcť všetkým návštevníkom.

Aké typy porúch alebo postihnutí poznáme?

Pre lepšie pochopenie prístupnosti, popíšeme rôzne typy postihnutí.

Situačná neprístupnosť nastáva aj vtedy, ako nie ste nijako zdravotne postihnutí, ale šoférujete auto a nemôžete sa venovať telefónu počas jazdy.

Existuje aj dočasná strata zraku, permanentná strata zraku, čiastočná strata zraku.

Stránka prispôsobená pre permanentne zrakovo postihnutých pomôže aj jednotlivcom, ktorí trpia dočasne, alebo sú v situácii, kedy nemôžu používať svoj zrak na bežnú činnosť.

Poznáme hlavné 4 kategórie postihnutí

Zrakové

Čokoľvek, čo ovplyvňuje schopnosť človeka vidieť, vrátane vnímania farby a svetla.

Pohybové / obratnosť

Čokoľvek, čo ovplyvňuje schopnosť človeka využívať celý rozsah pohybu svojho tela.

Sluchové

Čokoľvek, čo ovplyvňuje schopnosť človeka počuť.

Kognitívne

Čokoľvek, čo má vplyv na pamäť človeka, schopnosť používať jazyk, atď.

Poruchy zraku

Ľudia môžu mať slabé videnie, žiadne videnie, farebnú slepotu – počíta sa dokonca aj nemožnosť vidieť notebook za slnečného dňa.

Veľa nástrojov môže ľuďom s poruchami zraku pomôcť používať počítače a telefóny. Funkcie zväčšenia webového prehliadača, lupa na obrazovke a programy, ktoré zlepšujú kontrast medzi textom a farbou pozadia, môžu zlepšiť prístupnosť všetkých.

Potom existujú nástroje, ktoré prenášajú prácu očí na uši. Čítačka obrazovky napríklad prečíta slová na stránke.

Porucha zraku ovplyvňujú takisto ako ľudia vidia farby. Preto sa netreba pri vývoji a dizajne webov a aplikácií spoliehať na farbu oznamov a informácie. Napr. červená pre vymazanie.

Ak užívateľ zadá zlé heslo, pridajte oznam, ktorý bude obsahovať relevantný text na obrazovke, nie len zvukový alebo signál alebo animáciu.

Poruchy pohybu a obratnosti

Rovnako ako zrakové poruchy, pohybové poruchy môžu ovplyvniť spôsob, akým ľudia narábajú s softvérom a hardvérom.

Napríklad ľudia s poškodením s opakovaného namáhania (RSI = repetitive stress injury) ako napríklad karpálny tunel to môžu mať tažk pri klikaní myšou.

Iní môžu mať pohybovú poruchu, ktorá im znemožní používanie dotykovej obrazovky.

Pre dosah na digitálny obsah, ľudia s pohybovými poruchami môžu používať párovanie klávesnice s inými manuálnymi prepínačmi. Takisto môžu používať programy, ktoré im umožnia kontrolovať ich zariadenia pomocou zvuku alebo očí.

Poruchy sluchu

Poruchy sluchu sa líšia od úplnej hluchoty až po pokus počuť niekoho na druhej strane telefónu. Ak vytvárate web alebo aplikáciu, ktorá sa tvrdo spolieha na použitie zvuku alebo videa, zvážte ako bude slúžiť niekomu so stratou sluchu.

Napríklad ak máte na webstránke video s popisom výrobku, použite prepis obsahu videa alebo titulky.

Použitie titulkov môže pomôcť aj ľudom, ktorí nemajú poruchu sluchu ale nemôžu si pridať zvuk, nemajú reproduktor alebo nesmú používať zvuk pri práci.

Kognitívne poruchy

Patrí sem dyslexia, porucha pozornosti, ktorá môže ovplyvniť, ako ľudia prijímajú obsah a ako mu rozumejú.

Niektorí ľudia môžu rozumieť obsah ťažšie alebo inak. Pomôže im hlavne jednoznačný, jednoduchý a zreteľný obsah. Dizajn zameraný na čisté, efektívne a jednoduché línie je výhodou. Hlavne neprepchať stránku prebytkom textu a obrázkov, alebo zbytočnými animáciami.

Prístupnosť nie je len rampa

Prístupnosť môže ovplyvniť nie len to ako si zariadíte obchod a či dáte na schody rampu, ale aj to ako vytvoríte marketingové podklady, posty na Facebook, videá a treba si uvedomiť, že pri veľa obchodoch a firmách celkovo je prvý kontakt so zákazníkom práve webová stránka.

Jednoduchý dizajn je vždy výhodou

Veľké tlačidlá pre dotykovú obrazovku na vašej stránke sú vždy výhodou, či je to pre ľudí s poruchami, vyšším vekom alebo pre obdarených veľkými prstami.

Ďalej pomáhajú dobrá organizácia obsahu, informácie usporiadané krok za krokom, jednoznačné inštrukcie, …

Jednoduchý dizajn je však výhoda pre všetkých, štúdie neustále dokazujú, že pri jednoznačnej webstránke alebo e-shope ľudia nakúpia viac ako na stránke, kde vládne chaos.

Ako na to s webstránkou?

Aby ste vyladili svoje webstránku pre prístupnosť, pomôže ak si premyslíte vopred, akým spôsobom ju majú vaši návštevníci používať. Vytvorte si akési profily návštevníka, dajú sa na to použiť napr. štatistiky návštevnosti vašej stránky, kde si pozriete ako a v akom poradí sa na vašej stránke ľudia pohybujú.

Začnite so základnými potrebami, ktoré návštevníci na vašej stránke majú. Ak je to e-shop, je to pridať niečo do košíka, prečítať si popis produktu a zaplatiť.

Premyslite si, či sa dobre e-shop ovláda, či nie je malý kontraste medzi textom a pozadím, či sú tlačidlá dostatočne veľké na mobile.

Posúďte, či váš obsah je:

Vnímateľný

Môžu vaši návštevníci vedieť o vašom obsahu pomocou viac ako jedného zmyslu? Napr. obrázok bez popisu to nespĺňa.

Vaši návštevníci by mali vedieť zistiť, aký obsah na stránke máte, že sa tam nachádza popis produktu, článok blogu, recenzia, …

Silný kontrast medzi textom a pozadím je kľúčový pre ľudí so zrakovými poruchami.

Zrozumiteľný

Môžu ľudia omylom vnímať a chápať informáciu na vašej stránke viacerými spôsobmi?

Sú označené jednoznačne polia pri formulároch, jednoducho rozoznateľné ikony, chybové hlášky majú aj textovú verziu?

Majú obrázky tzv. alt text, aby im čítačka obrazovky prečítala, čo sa nachádza na stránke?

Nemáte dôležité nápisy na obrázku namiesto textu?

Ste struční pri popisoch? Radšej použite slovesá ako dlhé popisy.

Prehľadný a použiteľný

Môžu návštevníci pracovať so stránkou a navigovať sa na stránke bez problémov?

Môžu používať stránku aj klávesnicou aj myšou?

Dá sa tabulátorom pohybovať po stránke a je najdôležitejší obsah na vrchu?

Pripravený pre všetkých

Môžu ľudia navštíviť vašu stránku cez hlavné prehliadače, operačné systémy a asistenčné nástroje?

Ak máte veľkú stránku plnú obsahu, pohybovanie sa tabulátorom na stránke je asi časovo nemožné a otravné. Ak si chce váš návštevník len prečítať popis výrobku, zvážte spôsob ako mu uľahčiť navigáciu v množstve informácií, aby sa čím skôr dostal tam, kam potrebuje.

Plánovanie vopred počas návrhu webovej stránky, náčrt návrhu stránky na papier alebo tabuľu a otestovanie zákazníkovho pohybu na stránke vám môže pomôcť identifikovať ktorý obsah má byť prioritný pre klávesnicu Tab a overiť, či bude navigácia na stránke pohodlná.

Ak máte na stránke odkazy alebo tlačidlá odkazujúce na iné stránky, popíšte ich. Napríklad „Prejsť do košíka“ namiesto „Kliknite tu“.

Vhodné opatrenia na webovej stránke

1. Hlavička a navigácia sú konzistentné na celom webe
2. Na stránke sa dá pohybovať pomocou klávesy „TAB“
3. Farebné aj textové upozornenia pri chybách na stránke
4. Odkazy aj tlačidlá sú jednoznačne inej farby ako ostatný text
5. Silný farebný kontrast medzi textom a pozadím
6. Popis obrázkov „alt“ a popisy typu „label“ sú stručné a jasné, nepoužívate alt na dekoratívnych obrázkoch

Testovanie

Otestovať stránku na prístupnosť je najlepšie v praxi. Ak sa na vašu webstránku spolieha veľa ľudí z konkrétnou poruchou, skúste získať spätnú väzbu od nich. Existujú aj nástroje na automatizovanú kontrolu kontrastu a rôznych funkcií prístupnosti, neodporúčame však používať tie zastaralé, vždy tie najnovšie, nakoľko sa doba vyvíja a tieto veci sa rýchlo menia.