Přístupnost: Přeskakovací odkazy

Po přečtení článku Davida Špinara Přeskakovací odkazy nejsou jen pro nevidomé jsem se rozhodl přehodnotit přeskakovací odkazy tady, na Filově blogu. A dobře jsem udělal.

Původní řešení

Dříve jsem měl všechny důležité odkazy provázané pomocí tabindexu. Uživatel se po stisku tabindexu dostal přímo na vyhledávání, pak prošel menu a nakonec patičku. Tuto cestu musel projít na každé stránce před tím, než se dostal tabulátorem na obsah (error!). Umístění menu až za obsah webu tedy nemělo skoro žádný význam.

Co bylo špatně?

Původní přeskakovací odkazy měly tři chybky. První chyba – odkazy byly sémanticky špatně, protože skákaly na prázdný odkaz (podrobněji vysvětleno ve sérii článků Semantika kotev). Druhá chyba – odkazy byly neustále schované a pro uživatele používající klávesnici tudíž naprosto nepoužitelné. Třetí chybou bylo použití tabindexu. Uživatel, který použil daný odkaz a zmáčkl tabulátor byl zase v bludném kruhu. Přeskakovací odkazy tudíž neměly na Filově blogu defakto žádný smysl!

Nové řešení

Nový systém přeskakovacích odkazů funguje stejně jako na webech mezzoblue či 456bereastreet. Spočívá v zařazení přeskakovacích odkazů na počátek stránky, jejich skrytí pomocí CSS a následné absolutní napozicování do hlavičky při zmáčknutí tabulátoru (vlastnosti a:active a a:focus). Doporučuju stisknout tabulátor a mrknout se na výsledek.

Důležité poznámky

Při použití tohoto postupu nesmíte mít na stránce tabindexy. Uživatele, který ovládá web klávesnicí by jenom mátlo, kdyby jednou začínal v hlavičce a podruhé ve formuláři. Tabindexy nesmíte mít ani v přeskakovacích odkazech, jinak uživatel přejde na kotvu a při dalším zmáčknutí tabulátoru se vrátí zpět na následující přeskakovací odkaz.

Hodí se také centrálnímu elementu nastavit vlastnost position: relative;, aby se vám odkaz nepozicoval mimo hlavičku (závisí na konkrétním designu).

Follow @janrezac

Komentáře

rss komentářů

1. Jódlující bernardýn

23. 04. 05, 16.58

David to má moc dobře vyřešené, jen co je pravda. Ale ty jsi tu přeskakovací navigaci zapomněl skrýt…

2. Filosof

23. 04. 05, 17.27

Cože? Ty ji vidíš? Zkus aktualizovat stránku a případně napiš v jakým browseru je zobrazená špatně..

3. Jódlující bernardýn

23. 04. 05, 17.29

Teď se mi to už zobrazuje správně, ale před chvílí jsem měl na místě loga úzký řádek s navigací. Zkoušel jsem na to FF i Operu, ale nejspíš jsem se na stránku podíval ve chvíli, když si to testoval.

4. Filosof

23. 04. 05, 17.40

Je to možné :-)

5. meca

23. 04. 05, 19.29