Lukáš Zdechovan, osobný blog Luk Zdechovan, osobn blog - ikonka



Urýchlite nevidiacim prezeranie vašich stránok

Zaradené v Web design, napísal admin dňa 9 Marec, 2007

Logo únie nevidiacich a slabozrakých SlovenskaV článku sa vraciam k už spomínanej problematike prístupnosti webových stránok a tentokrát so zaujímavým prvkom a to neviditeľnou pomôckou pre nevidiacich, ktorá im umožní čítať internetové stránky bez zbytočného zdržania.

Zrakovo handicapovaní ľudia používajú na prezeranie internetových stránok špeciálne čítačky, ktoré im postupne čítajú jednotlivé dôležité prvky na stránke. Ak si vezmeme priemernú internetovú stránku, ktorá obsahuje na začiatku nejakú tú hlavičku s logom, nadpisom… potom zvyčajne nasleduje navigácia a za ňou hlavný obsah stránky. Ak sa chce nevidiaci k obsahu dostať, musí sa k nemu postupne popresúvať cez všetky predchádzajúce prvky na stránke. :-(

Jedným z riešení tohto problému je použitie neviditeľného bloku bleskových odkazov na začiatok stránky. :-) Takéto odkazy budú smerovať k záložkám umiestnením napríklad na začiatku navigácie, obsahu alebo dokonca vyhľadávania. Ak umiestnime takéto odkazy do blokového elementu ako <div> a nastavíme mu triedu .nazovtriedy { display: none } bude tento blokový element pre obyčajného užívateľa (so zapnutými CSS štýlmi) neviditeľný a nebude mu teda ani prekážať (Pozn. nezabudnite nastaviť štýl tohto bloku na “display: none” aj v CSS súbore určenom pre tlač stránky). Užitočné je nastaviť bleskovým odkazom aj klávesové skratky.

Ukážka možného riešenia:

+ súbor styles.css
body { … nejaké vlastnosti… }
h1,h2,h3 { … pár vlastností spoločných pre prvé tri skupiny nadpisov… }
.skip { display: none }

+ súbor stranka.html
…hlavička stránky - head…
</head>
<body>
<div class=”skip”>
<a href=”#navigacia” title=”Preskočiť na navigáciu” accesskey=”n”>Preskočiť na navigáciu</a>,
<a href=”#obsah” title=”Preskočiť na obsah stránky” accesskey=”o”>Preskočiť na obsah stránky</a>
</div>

… hlavička layoutu…
<ul id=”navigacia”>… navigácia …</ul> <!– Netreba uvádzať <a name=”navigacia” ak má element ul jednoznačne zadaný identifikátor, na ktorý odkazujeme –>
<div id=”content”>
… nejaký text a obrázky…
</div>
…koniec stránky

Ak na svoje stránky použijete takéto alebo podobné riešenie, verte mi, že vaši nevidiaci alebo slabozraký návštevníci to ocenia. :-D

Na záver vám poradím ešte jednu vec. Navigáciu po stránke môžete nevidiacim uľahčiť aj pridaním atribútu accesskey s príslušnou hodnotou do najdôležitejších odkazov navigácie. Nezabudnite klávesové skratky uviesť v titulku odkazu (napríklad: <a href=”knihy.php” accesskey=”k” title=”[k] Knihy a časopisy”>Knihy a časopisy</a>).



Napíšte komentár