Skočit na obsah

Přeskakovací odkazy nejsou jen pro nevidomé

Odkazy pro přeskočení navigace jsou mylně považovány za užitečné pouze pro uživatele hlasových čtečk, a tak bývají pomocí CSS porůznu skrývány. Nebylo by ale lepší je nechat viditelné?

Odkazy pro přeskočení navigace nebo naopak přeskočení na navigaci jsou již poměrně známé. Jedná se o odkazy, pomocí nichž lze pohodlně přeskočit větší obsahový blok a přes kotvu skočit na blok jiný. Pokud navigace ve zdrojovém kódu předchází samotnému obsahu stránky, měl by být použit odkaz Přeskočit navigaci (nebo třeba Skočit na obsah). Jesliže je navigace v kódu umístěna až za samotným obsahem, měl by před ním být odkaz Skočit na navigaci.

Protože byly tyto odkazy pojímány jako pomůcka pouze pro nevidomé uživatele hlasových čteček a protože se webdesignérům tyto odkazy na webech nelíbily ve vizuální podobě, jsou často pomocí nejrůznějších CSS technik skrývány.

Ti chytřejší nepoužívali display:none, protože hlasové čtečky pak tyto odkazy také neinterpretovaly, takže se využívaly techniky jako záporný margin-left, záporný text-indent nebo absolutní pozicování někam mimo obrazovku.

Proč ale vůbec skrývat?

Toto skrývání sice uspokojilo uživatele hlasových čteček, ale bylo naopak zcela k ničemu lidem, kteří sice vidí, ale stejně jako nevidomí ovládají web klávesnicí. Tito uživatelé stejně tak musejí proTABovat dlouhatánskou navigaci, než se vůbec dostanou k hlavnímu obsahu stránky.

Další nepříjemností je dále fakt, že jim při TABování vyskočí focus z obrazovky a najednou není vůbec vidět, protože schovaný odkaz na přeskočení navigace se nachází nějakých 10000 pixelů vlevo od obrazovky.

Proto se domnívám, že nejlepším způsobem je odkaz na přeskočení vůbec neskrývat, resp. jej skrýt tak chytře, aby byl schovaný jen pro myšomily, ale pro klávesáře zůstal viditelný. A k tomu se nám ideálně hodí CSS pseudotřídy focus resp. active.

Vyzkoušel jsem si tuto techniku na svém blogu a vy si ji můžete hned vyzkoušet. Stačí jen reloadnout stránku a trochu si zaTABovat. Jako první narazíte na odkaz Skočit na navigaci. Zdrojový kód zde pak vypadá takto:

Aktualizace: Erik Hoffmann původní kód ještě trochu vylepšil použitím vlastnosti z-index, díky čemuž odkaz šikovně schoval za obrázek v hlavičce a při fokusu se odkaz normálně objeví. Takže finální verze vypadá takto:

a.skipmenu {
    position:absolute;
    top:80px;
    z-index:0;
    padding:0.2em 0.5em;
    border-bottom:0 !important;
}
a.skipmenu:focus, a.skipmenu:active {
    z-index:2;
    background:#FFF;
}

Konkrétních metod použití může být pochopitelně celá řada a každému se hodi jiné zobrazení. Přesto se však domnívám, že je skutečně užitečné tyto odkazy zcela úplně neskrývat. Protože jsou užitečné nejen nevidomým.

Přidejte svůj komentář

David Špinar | 23. dubna 2005 | 16 komentářů | Trvalý odkaz

Hledání


Nové komentáře

Tip pro vás

Kurz přístupného webu

Chcete-li ušetřit za drahé konzultace a audity přístupnosti, doporučuji navštívit jednodenní Kurz tvorby přístupného webu.

Doporučuji

H1.cz: Odborné poradenství pro podnikání na Internetu

H1.cz: Odborné poradenství pro podnikání na Internetu

Kniha Tvoříme přístupné webové stránky

Více informací o mé knize

Reklama

Kvalitní hosting

Jednotná cena, individuální přístup. 500 MB, PHP, MySQL, antispam.

www.Cesky-Hosting.cz

 

Přístupnost - web a weblog věnovaný přístupnosti webových stránek, který píše David Špinar

Prohlášení o přístupnosti | RSS weblogu | RSS komentářů weblogu | Vypnout CSS | Hostováno u Český hosting | Doména u IInfo