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.
