V predchádzajúcich článkoch sme prešli prístupnosť nadpisov, odkazov a zoznamov, ako majú vyzerať prístupné tabuľky, grafy a diagramy či ako na alternatívny popis obrázkov. V tomto článku sa spolu pozrieme na oblasti (landmarks) webových stránok.
Čo sú to oblasti
Keď sa pozrieme na web, nevidíme jednoliatu masu textu a odkazov. Graficky je odlíšený minimálne v úvodzovkách úvod, jadro a záver webu.
Vo vrchnej časti vidíme úvod – hlavičku webovej stránky, kde nájdeme spravidla jej názov, logo, prípadne motto a niekedy odkazy na zmenu jazyka, prihlásenie, vyhľadávanie (hoci ak by sme chceli byť dôslední, aj vyhľadávanie môže byť samostatná oblasť) a podobne.
Ďalej si všimneme hlavné menu – navigáciu. Tá môže byť rôzneho druhu: len niekoľko odkazov, menu zbalené v rozbaľovacích tlačidlách, prípadne rozsiahle ponuky a podponuky.
Nasleduje hlavná časť webu, a to tá s jeho obsahom. Keď prídeme na úvodnú stránku blogu Technológie bez zraku, je to výpis článkov. Po otvorení článku alebo podstránky v hlavnej oblasti nájdeme zasa priamo ich obsah. Mohli by sme povedať, že hlavná oblasť je tá časť, ktorá sa po interakcii používateľa zmení.
Poslednou kľúčovou časťou je „záver“ teda päta. Tu väčšinou nachádzame kontaktné informácie, sociálne siete, pri e-shopoch podmienky nákupu, možnosti dopravy, webstránky verejných inštitúcií tu majú napríklad umiestnené aj vyhlásenie o prístupnosti a tak ďalej.
Načo sú dobré oblasti
Na to, aby sme sa na webe zorientovali. To platí ako pre bežných používateľov, tak aj pre ľudí využívajúcich čítač obrazovky.
Vidiaci človek vidí rozloženie webu na prvý pohľad, ale ako sme spomenuli v článku Prístupnosť a jej praktický dopad na používateľov čítača obrazovky, používatelia s ťažkým zrakovým postihnutím sa po webe pohybujú lineárne a zachytia vždy len určitý výsek obsahu. Najväčšie úseky im umožní preskončiť práve pohyb po oblastiach pomocou klávesových skratiek vstavaných v screen readeri.
Musíme však zdôrazniť, že ľudia používajúci klávesnicu (ale nie čítač obrazovky) pohyb po oblastiach využiť nevedia. Preto sú pre nich dôležité tzv. preskakovacie odkazy (skip links).
Ako a aké oblasti vytvárať
Landmarks vytvárame pomocou bežného HTML 5 alebo špecifikácie ARIA ((Accessible Rich Internet Applications). Kým v minulosti podpora HTML 5 tagov nebola stopercentná, teraz ich už asistenčné technológie podporujú a je lepšie používať tie.
Kým si ukážeme, ako sa samotné oblasti vytvárajú, je dobré uvedomiť si ešte raz, že oblasti slúžia na čo najrýchlejší pohyb po čo najväčších úsekoch. Preto s nimi narábajme opatrne a definujme len tie, ktoré majú pre používateľa skutočne zmysel. Nie je žiaduce mať na webe povedzme 20 oblastí, pretože tým sa stráca ich význam. Najvyužívanejšími oblasťami sú hlavička, navigácia, hlavná oblasť a päta. Zmysluplnou oblasťou môže byť aj doplnkový obsah (napríklad bočná lišta).
Oblastiam nezdvojujeme názvy, teda ak definujeme hlavnú oblasť pomocou <main> alebo role=“main“, už nepíšeme „hlavná oblasť“. Práve na to slúžia HTML tagy. Ak by sme to urobili, dôjde k duplicite, čo nie je žiaduce.
V nasledujúcej tabuľke je ich zápis pomocou HTML tagov a WAI-ARIA.
| Oblasť | HTML | ARIA | Popis |
|---|---|---|---|
| Hlavička | ;<header> | role=“banner“ | Logo, prípadne pole pre vyhľadávanie, tlačidlá pre zmenu jazyka a podobne |
| Navigácia | <nav> | role=“navigation“ | hlavné a postranné menu, do navigácie môžeme umiestniť aj napríklad obsah článku. |
| Hlavný obsah | <main> | role=“main“ | Premenlivá časť stránky – článok, v e-shope výpis vyhľadaných produktov, kontaktné informácie – jednoducho všetko to, čo sa po akcii používateľa na webe zmení. |
| Päta | <footer> | role=“contentinfo“ | Do päty zväčša umiestňujeme doplnkové info – kontaktné informácie, sociálne siete, e-shopy napríklad informácie o nákupe, platbe, doprave a podobne. |
Preskakovacie odkazy
Skip link môže pomôcť buď používateľom čítačov obrazovky, ktoré nepodporujú pohyb po oblastiach, alebo používateľom klávesnice bez ohľadu na znevýhodnenie preskočiť hlavičku aj navigáciu a dostať sa povedzme až na hlavný obsah alebo z päty na začiatok webstránky. Prvý preskakovací odkaz tak umiestňujeme ešte pred hlavičku ako úplne začiatočný prvok. Ďalší môžeme dať pod pätu a tým umožníme vrátiť sa do oblasti hlavičky.
Môžu mať niekoľko podôb:
- Viditeľný – umiestnime na stránku čistý text s odkazom. Je to najjednoduchšia cesta, no tento odkaz bude pre všetkých používateľov viditeľný za každých okolností.
Príklad:
<body>
<a href="#maincontent">Preskočiť na obsah</a>
<h1></h1>
...
</body>
- Čiastočne skrytý – ak sa obávame toho, ako preskakovací odkaz bude pôsobiť esteticky, môžeme ho skryť do chvíle, kým sa k nemu nedostane používateľ pomocou klávesnice. Aby bol takýto odkaz užitočný a prístupný, musí:
- byť predvolene skrytý,
- byť prístupný z klávesnice,
- byť dostatočne zvýraznený, keď dostane fokus,
- zabezpečiť, aby dostala fokus správne hlavná oblasť, prípadne hlavička. Nestačí, aby sa web len vizuálne zroloval alebo vyroloval.
Odkazy neskrývame pomocou CSS display:none, ani im nenastavujeme atribút hidden. Obidvomi spôsobmi ich totiž úplne znefunkčníme.
Pri formulácii názvu vychádzame z toho, aký má odkaz účel:
- Preskočiť na obsah – odkaz vedúci na začiatok hlavnej oblasti.
- Preskočiť na navigáciu – odkaz vedúci na menu.
- Nahor – vráti používateľa do oblasti hlavičky.
Na väčšine webov postačí mať 2 preskakovacie odkazy, a to „Preskočiť na obsah a „Nahor“. Dôležité tiež je, aby odkazy boli preložené do jazyka webovej stránky. Ak teda máme web v slovenčine, aj preskakovacie odkazy musia byť v slovenčine, pokiaľ v češtine, tak preložené do češtiny.
Záver
Hoci je podľa prieskumu stále najpoužívanejšou metódou pohybu na webe korektná nadpisová štruktúra, správne nadefinované oblasti (landmarks) teda hlavička, navigácia, hlavná oblasť a päta sú ďalším významným a jednoduchým spôsobom, ako uľahčiť používateľom čítača obrazovky orientáciu.
Nezabúdajme však ani na ľudí, ktorí síce nepoužívajú screen reader, ale napriek tomu sú odkázaní na klávesnicu. Najmä pre nich sú užitočné správne vytvorené preskakovacie odkazy.
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
- Prístupnosť a jej praktický dopad na používateľov čítača obrazovky
Zdroje
- WebAIM: Skip Navigation Links
- W3Schools: Accessibility Skip links
- WebAIM: Semantic Structure: Regions, Headings, and Lists
- W3C: Landmark Regions (ARIA Authoring Practices Guide (APG)
- Léonie Watson: Foundations: landmarks (TetraLogical)