Ako prispôsobiť webstránku, zdravotne postihnutým? Nemusíte byť expertom na kódovanie aby ste to dokázali.

Tým, že sprístupníte svoju webstránku osobám so zdravotným postihnutím,  dosiahnete, že bude prístupná naozaj všetkým. A vďaka tomu, že bude vaša webstránka prístupnejšia, pomôžete aj vyhľadávačom. 

Vyhľadávacie nástroje sledujú pri zostavovaní výsledkov vyhľadávania prvky, ktoré hovoria o tom, že je webstránka prispôsobená pre čítačku obrazovky.  Následne podľa týchto prvkov upravujú poradie vo výsledku vyhľadávania. Čo motivuje spoločnosť Google a prečo na tieto úpravy prihliada si môžete prečítať aj v tomto článku. 

 

Ako teda upraviť webstránku bez toho, aby ste boli expertom na kódovanie?

Tu sú niektoré tipy a triky, na ktoré vám stačia  základné znalosti HTML  aby sa vaša webstránka stala prístupnejšia. 

 

Nástroje prístupnosti webu 

W3C má skvelý zoznam nástrojov webovej dostupnosti, ktoré môžete použiť ako kontrolu, aby ste odhalili možné problémy. V každom prípade skúste si aj sami pre seba, otestovať váš web nejakou čítačkou.

 

Čítač obrazovky

Jedným z najdôležitejších spôsobov, ako môžete zlepšiť prístupnosť vašich webstránok, je zabezpečiť jej pochopenie čítačom obrazovky. Čítacie zariadenia obrazovky používajú syntetizovaný hlas na čítanie textu na obrazovke. Znie to  jednoducho, avšak čítač obrazovky nemusí vašu webstránku chápať správne. 

Asi vás zaujíma ako si vyskúšať čítač obrazovky, ak používate MAC, skúste službu VoiceOver.

1. Prejdite na predvoľby systému.
2. Vyberte prístupnosť.
3. Vyberte VoiceOver.
4. Začiarknite povolenie hlasovej pošty.

Nastavenie môžete zapínať a vypínať pomocou klávesovej skratky F5.

Ak používate Windows, skúste program NVDA.  Spustiť ho môžete  pomocou klávesovej skratky ctrl + alt + n, ak sa nachádzate na pracovnej ploche.  Nie je ho možné danou skratkou vypnúť. Vypnúť ho môžete klávesovou skratkou Insert+Q.

Obe uvedené čítače obrazovky fungujú tak, že používateľovi umožňujú navigáciu pomocou klávesových skratiek, čo je logické, ak nevidíte kurzor, ťažko sa v PC orientujete.  

Nevidiaci ľudia majú zvyčajne nastavené webové čítače na vysokú rýchlosť. Ak zatvoríte oči sami zistíte, že viac vám vyhovuje rýchlejšie tempo reči oproti tomu ako sa bežne dosahuje pri čítaní.  Skúste si vypočuť vašu webstránku, možno budú niektoré veci prehodené, iné neprečíta vôbec. 

Môže byť vynechaný nadpis tabuľky, alebo popis obrázku, čítačka oznámi iba „obrázok“. U tabuliek majú tendenciu čítať ich bez kontextu. Verím, však, že tieto drobnosti si viete upraviť. 

Ak ide o čítačku obrazovky  v slovenskom jazyku, citujem p. Petra Teplického z únie nevidiacich a slabozrakých Slovenska:

Čítač obrazovky minimálne rovnako dobrý ako NVDA   je  napríklad JAWS. Jeho cena je dosť vysoká – aktuálne stojí 1590€, nevidiaci ľudia si však môžu požiadať o príspevok Úrad práce, sociálnych vecí a rodiny SR, ktorý môže byť nanajvýš 95% ceny asistenčnej technológie.

Upozornil ma aj na to, že čítačky ebook nemajú nič spoločné s čítačmi obrazovky. Hoci ľudia so zrakovým postihnutím čítačky elektronických knižiek využívajú – v žiadnom prípade im však nevedia nahradiť tak komplexný nástroj ako je čítač obrazovky.

 

Alt obrázkov

Atribút alt-tag,  alebo alternatívny text (alt) sa používa pre popis obrázku. V HTML, zápis vyzerá takto:

<img src = „image-location“ alt = „tu je miesto, kde sa nachádza popis obrázka“>

Ak by ste boli nevidiaci, čo by ste chceli vedieť o danom obrázku? Nie je vhodné alt ponechať prázdny, jednak vám pomáha pri optimalizácií webstránky, ale tiež je to informácia pre čítač obrazovky o tom, čo sa v obrázku nachádza. Viac o atribúte alt sa dozviete v tomto článku. 

Príklad: Ak je na obrázku žena ktorá kreslí diagram, pre čitač obrazovky informácia „žena“ nie je dostatočná, mali by ste napísať niečo ako: „Žena kreslí diagram, branding, dizajn.“  Tak zachováte kľúčové slová z hľadiska optimalizácie webstránky, ale dáte informáciu aj slabozrakým. 

 

Title

Webstránky nie vždy zobrazujú title, teda  názov podstránky, ale sú užitočné pre čítač obrazovky. Uistite sa, že každá zo stránok vášho webu má opisný (ale nie príliš podrobný) názov, ktorý informuje návštevníkov o čom je vaša podstránka.

 

Štruktúra webstránky

Vaše webstránky by mali mať dobrú a prehľadnú štruktúru. Rozdeľte veľké úseky textu na menšie, vložte H1, H2, H3 nadpisy vhodným spôsobom. Nielenže takto vaše webstránky uľahčia prácu čítačom obrazovky, ale aj bežný užívateľ bude mať pred sebou prehľadný text. 

Je to tiež skvelý signál pre google, a iné vyhľadávacie nástroje, pretože sa  vedia lepšie orientovať na vašej webstránke a indexovať ju. Tiež by ste sa mali uistiť, že je vaša webstránka v správnom logickom poradí, a neobsahuje nesúvisiace informácie. Ak používate vloženú reklamu v článku, uistite sa, že nenarušuje text v rámci článku a nerozdeľuje ho. 

 

Tabuľky

Ak používate v článku tabuľku, prispôsobte ich pre čítač obrazovky. Nestačí ak zadáte názov tabuľky tučným písmom, pridajte element „scope“ , ten jasne označí riadky aj stĺpce tabuľky tak, že im porozumie aj čítač obrazovky. Inak ich môže čítať bez kontextu. 

 

Navigácia 

Všetko čo umiestnite na webstránke ak sa nedá ovládať pomocou klávesnice nevie s tým pracovať ani čítač obrazovky. Animované a rozbaľovacie menu, rôzne ovládacie prvky na webstránke ktoré majú peknú animáciu, ak ich pomocou klávesnice neviete ovládať vy, nedokáže to ani slabozraký či nevidiaci. 

 

Titulky

Ak ste na webstránku pridali video, alebo zvukový súbor, mal by obsahovať titulky. Dnes mnohé služby ako aj napríklad Youtube podporujú titulky. Tie umožňujú ako prístupnosť aj pre bežných používateľov,  ak užívateľ si nechce prehrávať zvuk, tak s nimi veľmi dobre vie pracovať aj čítač obrazovky.  Preto ak vyvárate video zvážte možnosť vložiť titulky, ako pre ľudí, ktorí si práve nemôžu pustiť zvuk , tak pre slabozrakých či nevidiacich. 

 

ARIA

Ak chcete prejsť na pokročilú úroveň ARIA,  alebo WAI-ARIA ma  za cieľ byť štandardom budúcnosti. Je to  komplexná (a vyvíjajúca sa) technická príručka. Nápomocný vám môže byť nástroj na validáciu ARIA pomocou ktorého zistite, či je vaša webstránka vhodná pre čítač obrazovky. Poukáže na problém a ponúkne aj riešenie. Ak používate Mozillu tento nástroj nájdete na tomto odkaze.

 

Za pomoc pri tvorbe článku ďakujem pánovi Teplickému z únie nevidiacich a slabozrakých Slovenska.