Webdesign: Prístupnosť v praxi
Poznámky, fakty a riešenia problémov prístupnosti internetových stránok, ktoré vznikli na základe stretnutia a testovania stránok s nevidiacim človekom.
Teória verzus prax
Môj starší článok o zásadách prístupných stránok je založený na teoretických znalostiach, testovaní v textových prehliadačoch a (dúfam) zdravom rozume. Nedávno som však mal tú česť otestovať a skonzultovať si tieto pravidlá ako aj konkrétne riešenia s niekým koho sa to týka asi najviac — s nevidiacim človekom.
Musím povedať, že mnohé veci sú v dokumentoch ako WCAG alebo na stránkach BFW zakotvené, no niektoré pravidlá by mali byť ešte upravené a zvýraznené. V nasledujúcom texte teda spomeniem zaujímavé problémy prístupnosti zoradené nevidiacim podľa priority od najdôležitejších po tie menej dôležité.
1. Odkazy na hlavné fragmenty stránky
Prehliadanie stránok môže byť pre nevidiaceho človeka značne nepríjemné keď väčšinu času musí tráviť hľadaním hlavných prvkov stránky (navigačné menu, hlavný obsah stránky,…). Preto je veľmi vhodné a pre použiteľnosť stránky nevidiacimi takmer nevyhnutné dávať ako prvé v kóde odkazy na tieto hlavné prvky.
<p class="non-visual"> <a href="#content" accesskey="1">skočiť na obsah</a> <a href="#menu">skočiť na menu</a> </p>
Tu však músim poznamenať, že často používaná metóda na schovávanie týchto navigačných odkazov pomocou display: none; je pre čítačku JAWS nevhodná. Ideálne sa preto zdá použitie kombinácie pravidiel:
.non-visual {
position: absolute;
width: 100px;
left: -200px;
}
Takto zadefinované elementy budú pre bežné prehliadače neviditeľné ale čítačky ich bez problémov prečítajú.
2. Navigačné menu
Navigačné menu by malo byť tvorené výhradne odrážkovými zoznamami <ul> aby nevidiaci získali zrozumiteľný obraz o hierarchickom rozdelení stránky.
<ul id="menu">
<li><a href="…">Produkty</a>
<ul id="menu-1">
<li><a href="…">CMS</li>
<li><a href="…">DMS</li>
</ul>
</li>
<li><a href="…">Služby</a>
<ul id="menu-2">
<li><a href="…">Webaplikácie</a></li>
<li><a href="…">Webhosting</a></li>
</ul>
</li>
</ul>
Pokiaľ ide o JavaScriptom ovládané vysúvacie menu je dobré aby boli položky na prvej úrovni taktiež odkazmi. Vysúvacie menu je totiž pre nevidiacich mätúce a tak skôr volia cestu cez hlavné položky v menu.
V takomto prípade sa zdá byť dokonca rozumné pre nevidiacich úplne schovať ostané úrovne menu a poskytnúť im namiesto toho pri načítaní stránky odkaz na práve rozbalenú položku. Teda nadväzujúc na ukážku kódu vyššie je napríklad vhodné na začiatok stránky so službami dať odkaz na práve rozbalenú položku menu.
<a href="#menu-2">skočiť na rozbalenú položku Služby</a>
3. Otvárenie nových okien prehliadača
Otvorenie nového okna prehliadača dokáže zmiasť nejedného priemerného používateľa. Nevidiaci to majú ešte tažšie. Čítačka JAWS síce ohlási otvorenie nového okna ale nevidiaci tak stráca do istej miery prehľad o tom čo sa deje. Nevidiaci totiž málokedy používajú viacero okien prehliadača súčastne. Ak ide napríklad o reklamné okno je vhodné aby bolo hneď z titulku stránky jasné, že ide o reklamu.
4. Sémantika
Nevidiaci prehliadajú stránku skákaním kurzoru po nadpisoch, odstavcoch a linkách. Preto je dôležité aby sme nadpisy a odstavce používali tam kde naozaj majú tento význam. Napríklad použitie tagu <h3> len kvôli veľkosti fontu je neprípustné. A ak navyše z kontextu nie je zrejmé, že nejde o nadpis tak nevidiaci ľudia strácajú orientáciu. To isté platí aj pre ostatné tagy.
5. Formuláre
Pri formulárových elementoch je pre správnu orientáciu nutné naučiť sa správne používať tag <label>. Sú dve možné použitia:
<label for="name">Meno</label> <input type="text" id="name">
<label>Meno <input type="text" id="name"></label>
Čítačka JAWS takto zviaže konkrétny text s daným formulárovým elementom. Obsah elementu label sa potom prečíta až keď je nevidiaci kurzorom na formulárovom elemente.
(22. júl 2004)