Přístupnost 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.
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

<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ú.

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>

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.

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.

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.

Autor píše svůj web johno#blog