7 spôsobov, ako hacknúť prístupnosť

Prístupnosť nie je len pre niekoľkých návštevníkov so zdravotným postihnutím, ktorí aj tak na váš web nechodia, aplikáciu nepoužívajú, dokumenty nečítajú. V tomto článku sa dozviete 7 jednoduchých spôsobov, ako si zvýšite návštevnosť a potenciálne aj zisky.

1. Používajte natívne HTML

Ak pri tvorbe webu budete pri čo najväčšom množstve prvkov používať natívne HTML, máte – dovolím si tvrdiť – 75 % problémov odladených. Ako to?

Čítače obrazovky aj software na ovládanie hlasom fungujú tak, že čerpajú informácie z kódu. Teda ak je tlačidlo urobené cez <button>, odkaz cez <a href>, začiarkavacie pole ako <input type=“checkbox“>, používateľ ho bude schopný z klávesnice nájsť a aj aktivovať.

V krajnom prípade, ak to inak nejde, využite ARIA (the Accessible Rich Internet Applications Suite), čo je vlastne doplnkový značkovací jazyk, ktorý definuje spôsob, ako sprístupniť obsah na webe a vo webových aplikáciách pre používateľom so zdravotným postihnutím. Výrazne môže pomôcť so sprístupnením dynamicky meneného obsahu a pokročilých ovládacích prvkov. Pred použitím ARIA je vhodné poradiť sa s konzultantom na prístupnosť, či neexistujú iné priamočiarejšie riešenia.

Nezabudnite prvky (odkazy, tlačidlá, formulárové polia, začiarkavacie políčka, prepínače) správne popísať, priradiť im label, prípadne zviazať ich s položkou, ktorú obsluhujú.

Týka sa to aj takých drobností, ako sú tabuľky a zoznamy. Vytvoríte ich pomocou CSS? Používatelia čítačov obrazovky ich identifikujú len ako neštrukturovanú masu textu. Použijete HTML prvky? Čítač ich nájde, oznámi v svojmu používateľovi v prípade tabuľky počet riadkov a stĺpcov, v zozname počet položiek, čo významne prispieva k orientácii na webe alebo v texte.

2. Ubezpečte sa, že všetky prvky sú dostupné a ovládnuteľné z klávesnice

Používatelia so zrakovým postihnutím a aj tí, ktorí z rôznych iných dôvodov nemôžu alebo nechcú využívať myš, sú odkázaní na to, aby všetky prvky, s ktorými je možné interagovať, našli aj obslúžili z klávesnice. Preto vytvárajte také ovládacie prvky, ku ktorým sa človek pomocou klávesnice dostane (overíte si to tak, že budete stláčať Tabulátor a sledovať, či sa pomocou neho dokážete pohybovať cez všetky interaktívne prvky, ktoré štandardne majú tabindex 0). A aj ich dokáže z klávesnice aktivovať (stačí na tlačidle, odkaze, checkboxe, radiobuttone stlačiť Medzerník alebo Enter a sledovať, čo sa stane).

V súčasnej dobe sa veľmi rozmáha móda robiť checkboxy a radiobuttony len grafické. Nielenže ich používatelia klávesnice nenájdu, ale ani nebudú vedieť, či pomocou nich vykonali zamýšľanú akciu alebo nie. To sa viaže k predchádzajúcemu bodu – vytvárajte čo najviac prvkov pomocou HTML a vyhnete sa sťažnostiam používateľov.

3. Kľúčová je správna štruktúra webu

Poradie kódu rozhoduje

Používateľ, ktorý vidí, takzvane oskenuje web jedným pohľadom. Vie sa tak bez problémov zorientovať, kde je hlavička, oblasť s obsahom aj päta. Avšak nevidiaci používatelia pomocou čítača obrazovky postupujú lineárne zhora nadol v takom poradí, v akom screen reader berie informácie priamo z kódu.

Základom je preto umiestňovať na web prvky v logickej nadväznosti tak, aby aj nevidiaci používateľ videl napr. odkaz na prihlásenie v hornej časti webu ako každý iný. Veľmi často sa tiež stáva, že modálne dialógy sa v kóde objavia až úplne na konci stránky, čím úplne vybočujú zo štruktúry.

Dajte si pozor aj na takzvaný Tab order – teda zameranie prvkov pri stláčaní Tabulátora. To by malo byť rovnaké ako poradie vizuálne fokusovateľných prvkov, používatelia to logicky očakávajú. Ak jedno s druhým nekorešponduje, nemeňte ho pomocou hodnoty tabindexu väčšej ako 0, ale ubezpečte sa, že majú všetky interaktívne prvky tabindex 0. Ak majú, skúste zmeniť poradie prvkov v samotnom kóde, CSS pre screen readery nehrá rolu.

Oblasti – hlavička, hlavná oblasť a päta

Na uľahčenie orientácie používateľom screen readera dobre poslúžia Oblasti. Sú to označenia konkrétnych častí (sekcií) webu alebo webovej aplikácie a definujú najčastejšie hlavičku, navigáciu, hlavné menu a pätu.

Tým umožníte ľuďom prerolovať web po veľkých úsekoch a zistiť, ktoré informácie a prvky sa kde nachádzajú.

Dávajte pozor len na to, aby oblastí nebolo na webe príliš veľa, vtedy strácajú zmysel. Testovala som 1 web, kde každý kontakt bol v samostatnej doplnkovej oblasti, čo rozhodne nie je dobré riešenie a veľmi to sťažuje orientáciu na webe.

Nadpisy – najpoužívanejší spôsob pohybu na webe

Zatiaľ stále najpoužívanejším spôsobom, ako používatelia čítačov obrazovky hľadajú informácie, je navigácia v nadpisovej osnove. Vyplýva to aj z posledného prieskumu WebAimz roku 2023, kde na otázku Čo urobíte ako prvé pri vyhľadávaní informácií? až 71,6 % respondentov uviedlo, že sa orientujú podľa nadpisovej osnovy.

Nadpisovú štruktúru preto berte vážne. Prvou zásadou je to, aby vychádzala z HTML kódu a nie CSS. Čítače CSS približne v 99 % ignorujú a nevedia posúdiť, že zväčšené a tučné písmo reprezentuje nadpis.

Ďalším krokom je zabezpečiť, aby nadpisom <h1> začínala hlavná oblasť na webe. To je tá, ktorej obsah sa vždy mení po kliknutí na podstránku alebo článok. Ak kliknete na článok, nadpisom 1. úrovne bude oštýlovaný jeho názov. Ak chcete zistiť kontaktné informácie a kliknete na Kontakt, nadpisom 1. úrovne bude podstránka začínať.

No a posledným, ale nemenej dôležitým bodom je logická nadväznosť nadpisovej osnovy. Úrovne nepreskakujte, teda po nadpise 1. úrovne bude logicky nasledovať 2. úroveň a nie 3. a nedajbože 5. alebo 6. úroveň. Nadpisy neslúžia na zvýraznenie dôležitosti textu. Práve na to je zväčšené a tučné písmo.

Predstavte si osnovu nadpisov ako číslovanie kapitol v odbornej publikácii alebo diplomovej práci. Kapitola 1 je vyznačená aj nadpisom 1. úrovne <h1>. Nasleduje jej podkapitola s číslom 1.1, kde podľa nadväznosti logicky patrí nadpis 2. úrovne <h2>. No a podkapitola podkapitoly nesie označenie 1.1.1, a preto aj nadpis bude 3. úrovne <h3>.

4. Grafická stránka veci

Ak chcete mať dobre prístupný web, nie je to len o kontraste, ale aj o ňom. Je preto dobré dodržať správny kontrast písma voči pozadiu a v grafike jednej farby voči druhej.

Dobrý kontrast písma s pozadím je vtedy, ak písmo do 18 pt je v pomere k pozadiu 4,5:1. Pokiaľ používate písmo nad 18 pt, kontrast stačí v pomere 3:1. Napríklad čierne písmo oproti bielemu pozadiu má kontrast 22 k 1, takže farebná škála na dodržanie správneho kontrastu je veľmi široká. Preto prístupné produkty naozaj nemusia byť škaredé. Z povinnosti dodržiavať kontrasty sú vylúčené logá, takže tu máte úplne voľnú ruku. Správny kontrast je jedným z mála parametrov, ktorý viete skontrolovať aj automatizovaným nástrojom, napríklad Contrast checker od WebAIM

Na webe všetky dôležité informácie uvádzajte v textovej forme, nepoužívajte obrázky. Tie sa zle zväčšujú, môžu sa rozostriť alebo až rozpixelovať. Ani nevidiaci používatelia z obrázkov informácie nevyčítajú a ak, tak s veľkými chybami a nepresnosťami.

Ak na webe máte dôležité obrázky, ktoré nesú kľúčovú informáciu a bez nich by sa obsah webu nedal pochopiť, pridajte k nim alternatívny popis. Pokiaľ grafika len ozvláštňuje text, stiahli ste ju z fotobánk a nemá vplyv na pochopenie obsahu, tag alt nechajte prázdny alt=““.

Písmo používajte dostatočne veľké, aby sa dobre čítalo aj na mobilných zariadeniach. Najvhodnejší font je bezpätkový, slabozrakým používateľom sa lepšie číta – jednotlivé písmená menej splývajú. Používatelia vám nepoďakujú ani vtedy, ak zvolíte príliš tenký, hrubý alebo ozdobný font pripomínajúci napríklad rukopis alebo kaligrafické písmo.

Zarovnanie je najlepšie použiť doľava, pretože pri blokovom zarovnaní podľa okrajov vznikajú medzi slovami príliš veľké medzery. Aj popisky pri formulárových poliach je oveľa lepšie umiestniť doľava od poľa alebo nad ním a hlavne nie príliš ďaleko. Ak si totiž takýto formulár zväčšíte, popisky len ťažko nájdete.

5. Prístupnosť multimediálneho obsahu

Máte na webe videá alebo zvukové nahrávky (napr. podcasty)? Aj tie môžete urobiť pre používateľov so zdravotným postihnutím prístupné.

Návštevníci so sluchovým znevýhodnením ocenia, ak k videám pridáte titulky a dôležité informácie z webu necháte preložiť do posunkového jazyka. Pre ľudí nepočujúcich od narodenia totiž hovorená a ani písaná forma jazyka nie je dostatočne zrozumiteľná. Ako na titulky sa dozviete napríklad tu: Technické nástroje a pracovní postupy pro titulkování a přepis. Na sprístupnenie podcastu dobre poslúži kompletný prepis nahrávky do textu.

Pre nevidiacich používateľov bude prínosné, ak k videám pridáte audiokomentár. Je to druhá zvuková stopa, ktorá popisuje vizuálny dej, ktorý vo videu nie je inak okomentovaný. Ľudia by bez nej nepochopili, čo sa vo videu deje. To sa hodí napríklad vtedy, ak vytvárate tutoriály, kde návštevníci vidia len záznam obrazovky bez slovného popisu.

6. Neodkladajte prístupnosť až na záver projektu

Prístupnosť nie je vhodné implementovať až na konci, keď už bude web vonku, aplikácia v aplikačnom obchode, dokument distribuovaný čitateľom. Prečo?

Pretože je oveľa časovo aj finančne náročnejšie ju doladiť. Konzultant prístupnosti testuje celý web (nie jeho jednotlivé komponenty), preto nad tým strávi oveľa viac času. Vývojári dolaďujú oveľa viac neodladených prístupnostných nedostatkov – napríklad máte web (aplikáciu), kde je množstvo tlačidiel. Ak napríklad používate metódu, keď je tlačidlo dostupné len po kliknutí myšou, čo je prístupnostný problém (všetky prvky musia byť dostupné aj ovládnuteľné z klávesnice), musíte na webe opraviť všetky tlačidlá. Ak prizvete konzultanta prístupnosti už na začiatku, ten môže konzultovať a dolaďovať len čiastkové komponenty, ktoré stačí nakoniec jednoducho dotestovať, či fungujú podľa prístupnostných štandardov.

Prípadne v e-shope používate modálne dialógy, ktoré nie sú prístupné – neskočí do nich fokus, nemajú zatváracie tlačidlo, nereagujú na Esc…, tak konzultant dialógové okná otestuje, vysvetlí princípy ich fungovania a pomôže nájsť vzor prístupného dialógového okna. Vyhnete sa tak testovaniu každého jedného dialógu na webe či v aplikácii.

Chcem audit

7. Nechajte sa zaškoliť v prístupnosti

Na dobrom školení sa dozviete, čo to vlastne prístupnosť je, komu slúži, že nie je len pre zopár vyvolených používateľov so zdravotným postihnutím. Uvidíte, že z nej v konečnom dôsledku čerpajú všetci, že nie je potrebné vytvárať pre zdravotne znevýhodnených používateľov druhý, prístupný, variant vášho produktu, že často stačí len zopár riadkov kódu, aby ste používateľský zážitok dostali na oveľa prístupnejšiu úroveň.

Konzultanti prístupnosti, ktorí majú tú výhodu, že aj sami asistenčné technológie využívajú, vám radi ukážu, ako má prístupný produkt vyzerať, a najmä z akého dôvodu. Dozviete sa tak, že vaši návštevníci na stránke nenájdu kontaktné informácie, pretože podstránka sa načíta len po kliknutí myšou.

Ukážu vám, že tlačidlá a editačné polia bez popisu môžu spôsobovať na niektorých typoch webov vážne problémy. Predstavte si internetové alebo mobilné bankovníctvo, kde by ste nevedeli, ktorý údaj kam patrí.

Alebo situácia, keď potenciálni zákazníci nemôžu dokončiť objednávku, pretože posledný krok v košíku – checkbox súhlas so spracovaním osobných údajov – sa z klávesnice nedá začiarknuť. S týmto a inými problémami sa reálne stretávajú ľudia využívajúci čítač obrazovky.

Chcem školenie

Záver

Aj keď to tak na prvý pohľad vyzerá, vytvoriť prístupný produkt nie je až tak náročné, ak dodržíte základné princípy. Pokiaľ si nie ste istí, spojte sa s konzultantom na prístupnosť, ktorý vás zaškolí, ale tiež otestuje web, webovú alebo mobilnú aplikáciu a pomôže nájsť také riešenia, ktoré budú aj graficky príťažlivé, aj prístupné.