Klávesnica a lineárny pohyb

Keď sa dobre vidiaci človek pozrie na stránku, vie ju takzvane oskenovať. Jeden pohľad mu stačí na to, aby videl jej rozloženie – kde je menu, vyhľadávanie, hlavička, hlavný obsah či päta. Používatelia s ťažkým zrakovým postihnutím k aplikáciám, webom a dokumentom pristupujú prostredníctvom asistenčných technológií. Najčastejšie je to zväčšovací software a čítače obrazovky, ktoré všetky informácie prezentované graficky prevedú do reči.
Úplne nevidiaci ľudia, samozrejme, nedokážu využívať myš, pretože nevidia jej kurzor a na webe a v dokumentoch sa pohybujú zásadne využitím klávesnice. Z toho dôvodu je úplne nevyhnutné, aby všetky prvky, ktoré má k dispozícii vidiaci používateľ po kliknutí myšou, boli z klávesnice plnohodnotne dostupné a ovládateľné.
Využívanie čítačov obrazovky má dve hlavné úskalia:

• Screen reader prezentuje svojmu používateľovi informácie tak, ako za sebou nasledujú v kóde, a štýlovanie pomocou CSS úplne ignoruje. To znamená, že hoci je web či aplikácia pre bežných (a niekedy aj slabozrakých) používateľov prehľadná, nevidiacim ľuďom môže spôsobovať veľké problémy.
• Čítače obrazoviek k digitálnemu obsahu pristupujú lineárne. a zachytia vždy len istý malý úsek. Pri pohybe Tabulátorom sa človek dostane na všetky interaktívne prvky, ak sa pohybuje šípkami, je schopný naraz prečítať maximálne 1 riadok. Avšak okrem štandardných navigačných klávesov môže využiť aj špeciálne klávesové skratky integrované v tom ktorom čítači obrazovky, ktorými vie preskočiť oveľa väčšie úseky. Takémuto zrýchlenému prehliadaniu sa hovorí rýchla navigácia.

Oblasti webovej stránky

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. Vyznačujeme pomocou HTML alebo ARIA tagov.
V rámci zachovania prehľadnosti a rýchlej orientácie je potrebné dať pozor na to, aby sme oblasti využívali v rozumnej miere a nemali ich na webe či v aplikácii priveľa. Používateľ čítača obrazovky (platí pre NVDA) sa po oblastiach môže pohybovať klávesovou skratkou d v prehliadacom režime.

Nadpisová štruktúra

Je stále najpoužívanejšou metódou pohybu na webe. Čítač obrazovky umožňuje preskakovať nadpisy všeobecne dopredu aj späť (H alebo Shift+H), ale aj jednotlivé úrovne (čísla 1 až 6 alebo Shift+1 až 6 – platné pre NVDA). Preto odporúčame nadpisovú osnovu na weboch, v aplikáciách a dokumentoch nepodceňovať.

Zásady pri tvorbe nadpisovej osnovy

• Nadpisová osnova sa podobá číslovaniu kapitol v odbornej publikácii, musí byť preto logická a nepreskakovať úrovne. Nadpis 1. úrovne <h1> označuje názov stránky alebo uvádza hlavný obsah. Je to najčastejšie názov článku či podstránky. Ostatné nadpisy majú logicky nasledovať tak, aby štruktúra dávala zmysel. Preto úrovne nevynechávame – po nadpise 1. úrovne nasleduje nadpis 2. úrovne a tak ďalej.
• Napriek tomu, že to WCAG umožňuje a nejde teda o prehrešok proti prístupnosti, odporúčame, aby nadpis 1. úrovne bol na stránke vždy len jeden. Buď to je názov webu, podstránky či článku. V takom prípade uvádza hlavnú oblasť.
• Nadpisy na webe vytvárame vždy pomocou HTML tagov <h1> až <h6> a nie len zväčšeným a tučným písmom. Vizuálne štýlovanie nadpisov nie je pre nevidiacich používateľov dôležité, pretože čítače ho ignorujú. Avšak ak nevytvoríme nadpisovú osnovu pomocou HTML, používateľ sa o tom, že tam nejaké nadpisy sú, vôbec nedozvie.
• Vo Worde a v redakčných systémoch (ako napríklad WordPress) využívame na tvorbu nadpisov štýly. Spôsob, ako ich vytvárať, záleží na konkrétnom systéme.
• Nadpisy nevyužívame na zvýraznenie blokov textu. V tomto prípade použijeme tučné a/alebo zväčšené písmo.
• Samozrejme, treba dbať aj na vhodnú grafickú úpravu pre slabozrakých používateľov. Nevhodné sú kapitálky, príliš ozdobné či tenké alebo naopak hrubé písmo a nedostatočný kontrast písma voči pozadiu. Odporúčaný kontrast pre nadpisy je v závislosti na veľkosti písma 3 až 4,5:1 voči pozadiu (čím menšia veľkosť fontu, tým väčší kontrast).

Príklad


<h1>Prístupnosť a jej praktický dopad na používateľov asistenčných technológií</h1>
<p>Digitálna prístupnosť znamená rovný (nie rovnaký) prístup k informáciám pre všetkých používateľov webových stránok, aplikácií každého druhu a dokumentov bez rozdielu...<p>

<h2>Klávesnica a lineárny pohyb</h2>

Vyzerá v skutočnosti takto:

Prístupnosť a jej praktický dopad na používateľov asistenčných technológií

Digitálna prístupnosť znamená rovný (nie rovnaký) prístup k informáciám pre všetkých používateľov webových stránok, aplikácií každého druhu a dokumentov bez rozdielu…

Klávesnica a lineárny pohyb

Odkazy

Sú kľúčovou súčasťou najmä webov a mobilných aplikácií a presmerujú používateľa na podstránku prípadne na inú webovú lokalitu.
Používateľ čítača obrazovky (NVDA) môže využiť na webe a vo webových aplikáciách pohyb po odkazoch akéhokoľvek druhu – všetkých, navštívených alebo nenavštívených. Preto je ich podoba pre ľudí s úplnou alebo čiastočnou stratou zraku veľmi dôležitá.
Screen readery ponúkajú aj takzvaný zoznam prvkov, kde si používateľ môže vyfiltrovať ich typ – nadpisy, odkazy, oblasti, formuláre a tak ďalej.

Zásady pri tvorbe odkazov

• Odkaz musí byť dosiahnuteľný a ovládnuteľný z klávesnice. To znamená, že sa naň používateľ čítača musí vedieť dostať a zároveň ho aj prostredníctvom klávesnice aktivovať.
• Je potrebné, aby bol samovypovedajúci, teda nenútime čitateľov skúmať okolitý kontext, aby zistili, kam asi vedie. Ak sa pohybujú po odkazoch a nájdu niekoľkokrát len text „Tu“ alebo „Viac informácií“, prípadne „Čítať viac“, nevedia, k čomu sa tento odkaz vzťahuje. To isté platí aj pre už spomenutý zoznam prvkov – pokiaľ si nechajú vyfiltrovať odkazy, ak nebudú samovypovedajúce, nemajú šancu zistiť ich cieľ.
• Odkazy musia byť jasne odlíšené od okolitého textu nielen farbou.

Je jasné, že niektoré odkazy sú príliš dlhé a z vizuálneho hľadiska ich nemôžeme použiť. Pre takéto prípady je možné využiť popis odkazu cez aria-label, čím zabezpečíme, že bežní používatelia uvidia len krátku formu odkazu (napríklad „Viac informácií“), no používatelia čítača obrazovky majú možnosť počuť oveľa dlhší popis („Viac informácií o konferencii Prístupne 2023“)
Pokiaľ totiž využijeme aria-label, informácie si z neho berie len čítač obrazovky, vizuálne ostáva skrytý. Je potrebné však dať pozor na to, aby začiatok popisu cez aria-label bol zhodný s vizuálne viditeľným odkazom. Inak sa k odkazom nebudú môcť dostať používatelia odkázaní na hlasové ovládanie.

Príklad

• Nesprávna formulácia:
  

  Efektívny pohyb na webe a v dokumentoch s čítačom NVDA

  Efektívny pohyb na webe, ale nielen tam je základom úspechu či už pri štúdiu, alebo aj v zamestnaní. Pretože spôsobov prezerania dokumentu a webu je hneď niekoľko, ale nie všetky sú rýchle a užitočné. Niektoré z nich dokonca vedia používateľov – začiatočníkov – poriadne frustrovať.
  Poďme sa teda pozrieť na to, ako sa dostať rýchlo a efektívne tam, kde potrebujete.
  (Čítať celý článok)
  
  V kóde to vyzerá takto:
  
  
<a href="https://technologiebezzraku.sk/2022/08/22/efektivny-pohyb-na-webe-a-v-dokumentoch-s-citacom-nvda/">(Čítať celý článok)</a>


• Správna formulácia:
  

  Efektívny pohyb na webe a v dokumentoch s čítačom NVDA

  Efektívny pohyb na webe, ale nielen tam je základom úspechu či už pri štúdiu, alebo aj v zamestnaní. Pretože spôsobov prezerania dokumentu a webu je hneď niekoľko, ale nie všetky sú rýchle a užitočné. Niektoré z nich dokonca vedia používateľov – začiatočníkov – poriadne frustrovať.
  Poďme sa teda pozrieť na to, ako sa dostať rýchlo a efektívne tam, kde potrebujete.
  (Čítať celý článok)
  
  Zápis v kóde:
  
  
<a href="https://technologiebezzraku.sk/2022/08/22/efektivny-pohyb-na-webe-a-v-dokumentoch-s-citacom-nvda/" aria-label="Čítať celý článok Efektívny pohyb na webe a v dokumentoch s čítačom NVDA">(Čítať celý článok)</a>


Stále vidíme len „Čítať celý článok“, no čítač obrazovky prečíta „Čítať celý článok Efektívny pohyb…“. Popis prostredníctvom aria-label však využívame len v prípade, ak nie je možné preformulovať odkazy tak, aby boli viditeľné v zrozumiteľnej forme pre všetkých bez rozdielu.

Formulárové prvky

Formuláre sú na weboch bežnou súčasťou a používateľ screen readera dokáže využiť navigáciu aj po ich prvkoch, ako sú editačné polia, tlačidlá, prepínače, začiarkavacie polia, zoznamové rámiky a podobne. Preto je takisto kľúčové, aby boli nielen dostupné, ale aj plne ovládateľné z klávesnice.

Ako na prístupné formulárové prvky?

• Editačné polia musia byť zviazané so svojím popisom. To znamená, že ak používateľ do editačných polí má zadať meno, priezvisko a e-mail, aj pri pohybe po nich klávesovou skratkou by mal vedieť, ktorý údaj kam patrí.
• Tiež je potrebné, aby editačné pole malo určený typ údajov, ktorý do nich používateľ zapisuje. Ak zapisujeme meno, editačné pole bude textové, ak zadávame e-mailovú adresu, typ e-mail. Eliminujeme tak chyby pri zapisovaní údajov.
• Dbáme na správne používanie prepínačov a začiarkavacích polí. Zatiaľ čo prepínače umožňujú zvoliť vždy len jednu možnosť (áno / nie), pomocou začiarkavacích políčok vyberáme jednu, ale aj viac možností (napríklad typy obsahu, za ktoré chceme platiť – články, videonávody, recenzie).
• Používateľ by mal pri pohybe po prepínačoch a začiarkavacích poliach vedieť, ktorú možnosť si začiarknutím vyberá. To znamená, že musia byť zviazané s voľbou, ku ktorej sa vzťahujú.
• Je potrebné, aby aj zoznamový rámik bol zviazaný s otázkou, ku ktorej patrí. Napríklad ak prostredníctvom neho vyberáme mesto, mal by niesť menovku „Vyberte mesto“.
• Pri rozbaľovacích tlačidlách (v súčasnosti sa často využívajú na otváranie podponúk v menu) používateľ screen readera musí vedieť jeho stav – rozbalené / zbalené. Zabezpečíme to pomocou ARIA roly aria-expanded
  • aria-expanded=“false“ – ak je podmenu zbalené
  • aria-expanded=“true“ – pre rozbalenú podponuku
• Pre slabozrakých používateľov je vhodné, aby popisky polí boli umiestnené čo najbližšie k nim. Najvhodnejšie umiestnenie je priamo nad poľom.

Grafika

Obrázky sú neoddeliteľnou súčasťou webov, aplikácií, ale aj mnohých dokumentov. Vysvetlenie, ako robiť ich správny popis, by vydalo na samostatnú publikáciu.
Vo všeobecnosti platí, že ak obrázok nesie kľúčovú informáciu, bez ktorej sa obsah nedá pochopiť, je potrebné, aby sme mu dali takzvaný alternatívny popis. To urobíme pomocou atribútu alt=““. Pokiaľ je na obrázku text, do alternatívneho popisu patrí celý jeho prepis, čo sa týka aj screenshotov. Tu dávame na zváženie, či je nutné vôbec používať obrázky s textom. Pokiaľ ide napríklad o pozvánku, na ktorej je dátum a čas, zle sa s takýmto obrázkom pracuje aj bežným používateľom.
Pokiaľ je obrázok zároveň aj odkazom či tlačidlom, nepopisujeme ho, ale do alternatívneho popisu uvedieme jeho funkciu: namiesto popisu vzhľadu alt=“lupa“ uvedieme alt=“Hľadať“. Alebo ak logo na začiatku webu slúži na návrat na domovskú stránku, dáme mu popis „alt=“Späť na hlavnú stránku“ (alebo niečo podobné).
Pri infografikách, grafoch a diagramoch pridáme obrázkom len všeobecný alternatívny popis, no zabezpečíme, aby sa človek k informáciám z nich dostal iným spôsobom. Výsledky z grafu a diagramu môžeme buď spracovať do prístupnej tabuľky, alebo ich zhrnúť v texte. Text infografiky prepíšeme celý napríklad do samostatného textového dokumentu.
Pokiaľ je grafika len dekoratívna – ilustračné obrázky z fotobánk na „skrášlenie“ textu – alternatívny text jej nepridávame. Atribút alt=““ musí ostať, no necháme ho prázdny.
Odporúčame obrázok popisovať tak, ako by ste ho opísali človeku, ktorý k nemu nemá prístup, napríklad do telefónu. Dĺžka alternatívneho textu nie je síce nijako striktne stanovená, ale je vhodné vyjadrovať sa čo najjasnejšie a najstručnejšie. V takomto texte sa totiž nedá pohybovať a používateľ ho buď musí vypočuť celý, alebo preskočiť obrázok.
Pokiaľ ide o obrázky k testovým úlohám, alternatívny popis umiestňujeme zásadne ako text k obrázkom, nie do atribútu alt. Väčšinou je totiž potrebné s takýmito obrázkami pracovať a riešiteľovi týmto dáme možnosť popis čítať po častiach.
Takisto je veľmi dôležitý kontext. Priblížime to na príklade obrázku s logom. Iný popis volíme v prípade loga umiestneného na webe a iný vtedy, ak píšeme o novom logu v článku.

Príklad

• Logo na webe:
  
  

  V kóde to vyzerá takto:
  
  
<img src="https://technologiebezzraku.sk/wp-content/uploads/2023/05/Logo-2-small.png" alt="Logo Technológie bez zraku" height="100" width="100">


• Popis loga do článku o ňom:
  
  

  Kód:
  
  
<img src="https://technologiebezzraku.sk/wp-content/uploads/2023/05/Logo-2-small.png" alt="Modré prečiarknuté oko na žltom pozadí, v ktorého zreničke je žlté písmeno t v Braillovom písme." height="100" width="100">


Tabuľky

Čítač obrazovky umožňuje svojmu používateľovi pohybovať sa po tabuľkách a v rámci nich prechádzať stĺpcami a riadkami. Preto nepoužívame tabuľky na rozloženie samotnej webovej stránky.
Aby bola tabuľka prístupná, je kľúčové vytvárať ju na webe pomocou tagu <table> a nie len pomocou CSS. V textových editoroch (napr. Word) využijeme funkciu Vložiť Tabuľku.
Ak totiž informácie do tabuľky usporiadame len vizuálne (pomocou odsadenia či CSS), čítač ich ako tabuľku nevie identifikovať. Ďalším veľkým problémom pre používateľov čítačov obrazovky sú zlúčené bunky. V takejto tabuľke sa veľmi zle orientuje a človek často nevie správne priradiť spolu súvisiace informácie.
Pokiaľ pred tabuľkou nie je nadpis, ktorý hovorí o jej účele, použijeme titulok cez tag <caption>. Tým zabezpečíme, aby nevidiaci používatelia pri prechode po tabuľkách okamžite vedeli, aký typ informácií v tabuľke nájdu.

Príklad

• tabuľka v tomto prípade vytvorená len pomocou tabulátorov a tagov pre nový riadok:

  Rozvrh hodín
  
              1          2          3          4          5
  
  PO       M         SJ        AJ        TV       GE
  
  UT       BI        HI        ON       M         SJ
  
  ST        M         TV       SJ        AJ        Ge

  Z takto vytvorenej tabuľky používateľ čítača obrazovky potrebné informácie získa len veľmi ťažko, ak vôbec.

• Tabuľka vytvorená pomocou HTML značiek aj s hlavičkovými stĺpcami a titulkom:
  

  Rozvrh hodín

  deň	1	2	3	4	5
  PO	M	SJ	AJ	TV	GE
  UT	BI	HI	ON	M	SJ
  ST	M	TV	SJ	AJ	GE

V kóde to vyzerá takto:

<table class="data">
<caption>Rozvrh hodín<caption>
<thead>
<tr>
<th scope="col">Deň<th>
<th scope="col">1</th>
<th scope="col">2</th>
</thead>

...

<tbody>
<tr>
<th scope="row">PO</th>
<td>M</td>
<td>SJ</td>

...

</tr>
</tbody>
</table>

V takejto tabuľke nevidiaci používateľ počuje v každom stĺpci aj riadku príslušnú hlavičku, a nestratí tak kontext. V našom prípade vie napríklad zistiť, že v pondelok bude prvá hodina matematika, v utorok biológia.

Zoznamy

Ak je zoznam správne vytvorený, pre používateľov čítačov obrazoviek to má niekoľko výhod:

• Screen reader podá používateľovi informáciu o tom, že nasleduje zoznam a koľko má položiek.
• Okrem pohybu po zoznamoch je možné prechádzať aj po jeho jednotlivých položkách.
• V prípade, že zoznam používateľa nezaujíma, môže ho jednou klávesovou skratkou ľahko preskočiť.

Odporúčame zoznamy používať aj v oblasti <nav> a zoskupovať doň všetky spolu súvisiace odkazy. Môžeme ho použiť tiež v päte napríklad na zoskupenie sociálnych sietí, prípadne kontaktných informácií.

Vlastnosti správne vytvoreného zoznamu

• Rozlišujeme podľa kontextu číslované (zatriedené) a odrážkové (nezatriedené) zoznamy. Do číslovaného píšeme väčšinou po sebe nasledujúce kroky, umiestnenie v súťaži, postupy a podobne. Do odrážkového umiestňujeme zasa položky, ktoré spolu síce nejako súvisia, ale nemusia mať striktne určené poradie – odkazy, zoznam žiakov v triede, ńapríklad aj tieto vlastnosti zoznamu.
• Je vytvorený pomocou tagov <ul> alebo <ol> a nie len vizuálne. V textových editoroch a redakčných systémoch použijeme štýl zoznam.
• Skupina informácií, ktoré majú navzájom súvis, patrí do jedného zoznamu s viacerými položkami, nie niekoľkých zoznamov s jednou položkou.

Príklad

Nesprávny len graficky naznačený zoznam:
■ pondelok,
■ utorok,
■ streda

Nesprávne vytvorený zoznam s tým, že každá položka zoznamu je akoby samostatným zoznamom. Mojim nevidiacim čitateľom sa ospravedlňujem:

• pondelok,

• utorok,

• streda

Kód:

<ul>
<li>pondelok</li>
</ul>
<ul>
<li>utorok</li>
</ul>
<ul>
<li>streda</li>
</ul>

Správne vytvorený zoznam:

• pondelok,
• utorok,
• streda

V kóde to vyzerá takto:

<ul>
<li>pondelok,</li>
<li>utorok,</li>
<li>streda</li>
</ul>


Záver

Tento článok ani zďaleka nepokryl všetky oblasti prístupnosti a všetky jej nuansy. Popisuje prakticky len štruktúru webu alebo dokumentu tak, aby pre nevidiaceho používateľa, ktorý je odkázaný len na klávesnicu a čítač obrazovky, bol prístupný a príjemnejší na používanie.
K takmer každej tu popísanej oblasti už mám rozširujúci článok, prípadne ak nie je, chystám sa ho napísať. Preto nezabudnite sledovať sociálne siete Facebook, Twitter a prípadne nadviažme spojenie na LinkedIn.

Súvisiace články

• Prístupnosť a jej 4 princípy (POUR)
• Alternatívny text (Alt) – čo to je a ako ho používať?
• Prístupná štruktúra dokumentu a webu – nadpisy, odkazy, zoznamy
• Prístupná štruktúra dokumentu a webu – tabuľky, grafy a diagramy
• Prístupná štruktúra dokumentu a webu – formát PDF
• Efektívny pohyb na webe a v dokumentoch s čítačom NVDA
• Formátovanie textu vo Worde prístupne a pokročilo