Prístupná štruktúra dokumentu a webu – nadpisy, odkazy, zoznamy
V predchádzajúcich článkoch sme si vysvetlili, čo je to prístupnosť, aké má princípy a pozreli sme sa na grafiku a jej alternatívny popis. V tomto článku budeme pokračovať vhodnou štruktúrou dokumentov a webov, a to nadpisov, odkazov a zoznamov.
Správna štruktúra pomôže všetkým
Ak ste čitateľmi odbornej literatúry, prípadne ste písali bakalársku, diplomovú či dizertačnú prácu, viete, o čom je reč. Správna štruktúra nadpisov, zoznamov či odkazov v prípade webových stránok pomáha čitateľovi v efektívnejšej práci s textom. O to viac sa to týka ľudí využívajúcich čítače obrazovky. Tí sa totiž na stránke či v dokumente musia pohybovať lineárne. To znamená, že nemôžu očami preskočiť niekoľko riadkov a „skenovať“ text tak, ako to robia dobre vidiaci ľudia.
Na pohyb v texte používajú rôzne metódy: čítanie celého textu zhora až dolu, pohyb po nadpisoch, odkazoch (navštívených aj nenavštívených), na webe tlačidlách, prepínačoch, začiarkavacích poliach a podobne. Preto je správna štruktúra stránky alebo dokumentu pre nevidiaceho čitateľa doslova kľúčová.
Nadpisy
Pomocou nadpisov môžeme efektívne vytvoriť logickú štruktúru dokumentu. To znamená nadpis prvej úrovne uvádza kapitoly (na webe väčšinou názov stránky). Ideálne je, ak je v dokumente či na webe iba 1 nadpis prvej úrovne. Nadpisy druhej, tretej až šiestej úrovne zasa podkapitoly či iné nižšie bloky textu.
Nemáme však na mysli nadpisy formou zväčšeného a tučného písma. Správne nadpisy tvoríme pomocou štýlov a úrovní. Prečo? Jednak nám to pomôže s vygenerovaním funkčného obsahu v prípade dlhých dokumentov. A hlavne používatelia čítačov obrazovky veľmi často využívajú pohyb v texte po nadpisoch. Ten je však možný len v prípade, ak je nadpis vyhotovený pomocou štýlu.
Pozor! Nadpisy nepoužívame na zvýraznenie textu. Je to mätúce a nezapadá to do štruktúry. V tomto prípade môžeme využiť zväčšenie veľkosti alebo tučné písmo.
Ako na to?
Vo Worde stačí použiť klávesovú skratku ALT+SHIFT+šípky vľavo a vpravo. Pohybom doľava úroveň zvyšujeme, doprava znižujeme. To, ako má nadpis vyzerať, môžeme jednotne upraviť cez Panel ponúk > Štýly > Správa štýlov. Prípadne použijeme skratku CTRL+Shift+S. Tu potvrdíme štýl, ktorý chceme upravovať a nastavíme mu vhodné parametre.
Samozrejme, treba dbať na vhodnú grafickú úpravu. Nevhodné sú kapitálky, príliš ozdobné a nečitateľné písmo, veľmi tenké či naopak hrubé písmo a nedostatočný kontrast. Vyhnime sa tiež pätkovému písmu a radšej zvoľme to bezpätkové. Medzi bezpätkové písma patrí napríklad Arial, Calibri či Helvetica. Veľkosť by mala byť primeraná ostatnému textu a použitému štýlu.
V kóde html môžeme úroveň nadpisu meniť pomocou tagu <h 1 – 6>.
Príklad
<H4>nadpis štvrtej úrovne</h4> vyzerá takto:
Nadpis štvrtej úrovne
V redakčných systémoch, ako je WordPress, môžeme takisto meniť nadpisovú štruktúru. Spôsob však závisí od použitého editora.
Hypertextové odkazy
Sú kľúčovou súčasťou najmä webových stránok a mobilných aplikácií. Presmerujú čitateľa na podstránky alebo iné weby. Ich podoba je pre používateľov čítačov obrazoviek a takisto slabozrakých veľmi dôležitá. Z akého dôvodu? Aby čitateľ vedel už pri bežnom čítaní odlíšiť bežný text od hypertextového. Text odkazu musí byť zároveň dostatočne zrozumiteľný a má jasne popisovať účel. Používateľ tak ihneď vie, kam odkaz smeruje.
Zvýraznenie nezameraného a zameraného hypertextového odkazu
Bežným spôsobom, ako odlíšiť obyčajný text od textu odkazu, je podčiarknutie a zmena farby. Text odkazu teda je podčiarknutý a zväčša modrej farby. Pri vyberaní farby odkazov treba dbať na:
- Kontrast medzi pozadím a farbou odkazu,
- Kontrast medzi farbou obyčajného textu a farbou odkazu.
Odkaz by sa takisto mal zmeniť, ak ho používateľ zameria kurzorom myši alebo cez klávesnicu. To docielime buď tým, že bude mať hrubšie podčiarknutie a zmení sa mu farba, alebo bude orámovaný zhora aj zdola a zmení sa mu pozadie.
Dosiahnuteľnosť odkazu z klávesnice
Väčšina ľudí na pohyb po webovej stránke používa myš. Sú však skupiny používateľov, ktorí ju z rôznych dôvodov používať nemôžu – nevidiaci, slabozrakí, telesne postihnutí ľudia (a to aj dočasne napr. so zlomenou rukou), používatelia s poruchou jemnej motoriky alebo používatelia notebooku, pre ktorých je nepraktické používať touchpad. Preto je dôležité, aby boli odkazy dostupné aj z klávesnice.
Ako to funguje? Klávesom Tabulátor by sa používateľ mal dostať na každý odkaz na stránke. Po stlačení klávesa Enter by mal odkaz aktivovať. Šípkami sa môže bez problémov pohybovať po stránke a medzerníkom vyberať začiarkavacie polia, prepínače a iné prvky formulárov.
Zrozumiteľnosť zástupného textu odkazu
Zástupný text je text, ktorý odkaz uvádza. Čiže nie https://www.technologiebezzraku.sk, ale Technológie bez zraku.
Tento text by mal sám o sebe jasne a zreteľne vystihovať to, kam odkaz smeruje bez toho, aby používateľ musel čítať text okolo. Vyhnime sa preto odkazom typu „Tu“, „Viac tu“, „Viac informácií tu“, „ako píše“, „povedal“ a tak ďalej. Prečo? Ako sme spomenuli vyššie, používateľ čítača obrazovky používa často na pohyb po webe pohyb po tzv. prvkoch, medzi ktoré patria aj odkazy. Ak sa dostane na odkaz so zástupným textom „Tu“, nevie, k čomu sa vzťahuje. Nútime ho tak čítať obsah okolo odkazu, aby sa zorientoval a našiel kontext nezrozumiteľne pomenovaného odkazu.
Takisto ak odkazujeme na externé dokumenty, na otvorenie ktorých je potrebná iná aplikácia (napr. vo formáte pdf), je vhodné na to upozorniť už v texte odkazu.
Príklad: Cenník, formát PDF, 98 kB
Zoznamy
Môže sa zdať, že na zozname nemôže byť nič neprístupné. Opak je však pravdou. V prvom rade sa po nich dá takisto pohybovať, preto musíme vytvárať „skutočné“ zoznamy a nie len odsadené číslované položky. Väčšinou sa zoznam začne vytvárať automaticky sám či vo Worde, alebo na Webe. Problém môže nastať pri vkladaní textu z iného zdroja, kedy najmä odrážkový zoznam môže zaniknúť.
Druhou podstatnou zásadou je tvoriť zoznam s viacerými položkami ako 1 dlhší zoznam a nie viacero zoznamov s jednou položkou. V takom prípade totiž používateľ čítača obrazovky neskáče po celých zoznamoch, ale po jednotlivých položkách patriacich k sebe iba zbytočne rozdelených do niekoľkých zoznamov. Je to mätúce a veľmi zdĺhavé. Nútime tým používateľa pohybovať sa v texte riadok po riadku či slovo za slovom a to nie je žiaduce.
Odrážkový zoznam volíme v prípade, že položky majú medzi sebou nejakú súvislosť – dni v týždni, zoznam žiakov v triede, menu alebo možnosti prihlásenia na webe. Číslovaný zasa vtedy, ak chceme vyjadriť postupnosť krokov, ktoré sa nedajú alebo nemajú preskakovať – postup vytvorenia konta, recept a všeobecne akýkoľvek postup s presne danými krokmi.
Záverečné zhrnutie
- Nadpisovú štruktúru vytvárame zhora dolu – nadpis prvej úrovne je hore a čím ideme nižšie, tým sa zvyšuje úroveň.
- Nadpisy tvoríme pomocou štýlov.
- Dôležitá je aj grafická úprava nadpisu (samozrejme, aj celého textu) – bezpätkové písmo, dostatočný kontrast s pozadím, odlišná veľkosť nadpisu od ostatného textu, nepoužívame prečiarknutý, podčiarknutý, kurzívový ani príliš ozdobný font.
- Odkaz by mal byť zamerateľný z klávesnice, odlišný od okolitého textu a po zameraní zvýraznený.
- Zástupný text odkazu by mal byť používateľovi jasný aj bez okolitého kontextu.
- Zoznamy by mali byť skutočnými zoznamami a nielen odsadenými číslovanými položkami. Takisto je nutné spájať k sebe patriace položky do jedného zoznamu.
Ak sa chcete niečo spýtať, píšte na Facebooku, Twitteri, do komentárov pod článkom alebo e-mailom. Ak máte záujem o školenie, využite, prosím, Kontaktný formulár .Nič nepokazíte ani prihlásením sa na odber newslettera. Môžete len získať.
Zdroje
- Dizajn prístupných hypertextových odkazov a viditeľné zameranie
- Peter Lecký: Tvorba prístupných elektronických dokumentov
- Radek Pavlíček: Zákon o přístupnosti: Je vhodné používat odkazy „více“ a „zde“?
- Typefaces and Fonts
- Web Accesibility – Lists
Článek Prístupná štruktúra dokumentu a webu – nadpisy, odkazy, zoznamy vyšel původně na webu technologiebezzraku.sk.
