Dzień 11: Przeskakiwanie menu strony
Jeśli nie udało Ci się przerobić swoich stron tak, aby prezentować najpierw główną zawartość, możesz pójść na pewien kompromis: zrób dodatkowy odnośnik do przeskoczenia menu. To nie jest idealne rozwiązanie (lepiej żeby główna treść strony pokazywała się jako pierwsza) ale jest akceptowalne i używane na wielu stronach.
Odnośnik do „przeskakiwania” menu jest mechanizmem przeznaczonym przede wszystkim dla użytkowników posługujących się programem udźwiękawiającym, a nie dla widzących użytkowników przeglądarek graficznych. Dodatkowy odnośnik przed menu (czy generalnie wszelkie odnośniki do przeskakiwania większych porcji tekstu) byłyby dla użytkowników widzących zbędnym „zaśmiecaniem” strony. Z tego powodu najlepiej ukryć taki odnośnik przed przeglądarkami graficznymi, ale tak, aby był odczytywalny dla programów udźwiękawiających — uzyskamy taki efekt dzięki zastosowaniu stylów CSS. Taki ukryty odnośnik nie wpływa na układ strony — jakby go w ogóle nie było.
Kto na tym skorzysta?
- Marek skorzysta. Kiedy odwiedza Twoją stronę, Lynx pokaże ten odnośnik (ponieważ nie obsługuje stylów CSS) i to umożliwi Markowi przeskoczenie od razu do głównej treści strony. Zobacz Dzień 10: Główna treść jako pierwsza, gdzie opisano dlaczego to jest tak bardzo istotne.
- Jadzia skorzysta. Kiedy odwiedzi Twoją stronę, JAWS przeczyta ten odnośnik co umożliwi jej przeskoczenie całego menu i przejście od razu do głównej treści.
Jak to zrobić?
Przede wszystkim użyj narzędzia Lynx Viewer lub programu Lynx aby sprawdzić czy na Twojej stronie odnośniki nawigacyjne i menu są prezentowane przed główną treścią. Jeżeli główna treść strony jest pierwsza, to ta wskazówka Ciebie nie dotyczy — masz dzień wolny.
Uwaga od tłumacza: Oryginał książki „Dive Into Accessibility” sugeruje w tym miejscu
wykorzystanie reguły CSS .skiplink {display:none}
, która powinna ukryć odnośniki z klasą .skiplink.
Niestety jak wykazują testy ta technika nie działa — elementy ukryte za pomocą reguły display:none
są pomijane nie tylko przez przeglądarki graficzne, ale również przez programy udźwiękawiające. Dlatego poniżej przedstawiona jest inna technika, która wydaje się działać lepiej.
Ponieważ sposób, który uznajemy za naturalny (czyli wyłączenie wyświetlania odnośnika przez styl display:none
), nie sprawdza się we współczesnych programach udźwiękawiających, musimy
tutaj użyć pewnej sztuczki. Polega ona na takim opisaniu stylów CSS dla odnośnika, aby był on widoczny z punktu widzenia przeglądarki (i programu udźwiękawiającego!), ale niewidoczny dla człowieka
oglądającego stronę — po prostu przesuniemy go daleko poza widoczny ekran.
Na końcu swojego arkusza CSS dodaj następujący kod:
.skiplink {
position: absolute;
left: 0px;
top: -500px;
overflow: hidden;
}
Teraz wstaw odnośnik do przeskakiwania menu zaraz za nagłówkiem Twojej strony.
-
blog.pl: trudno jednoznacznie określić gdzie jest to miejsce w Twoim szablonie. Poszukaj kodu wstawiającego nagłówek, tytuł czy nazwę bloga — prawdopodobnie będzie to linia
zawierająca zmienną
{ksywa}
. Na pewno musisz wybrać miejsce przed odnośnikiem do księgi gości oraz zmiennymi{linki}
i{archiwum}
. - niByLog: miejsce wstawienia tego odnośnika zależy od tego, co masz umieszczone na stronie głównej przed wywołaniem skryptu niByLoga oraz w szablonie nagłówka; na pewno musi to być miejsce po nagłówku strony a przed menu — albo na stronie głównej albo w szablonie nagłówka bloga.
-
Movable Type: za fragmentem zawierającym
<$MTBlogTitle$>
i<$MTBlogDescription$>
. - Greymatter: nie ma określonej zmiennej w szablonie wstawiającej tytuł; poszukaj nazwy bloga.
-
Radio: za
<%siteName%>
i<%description%>
. -
Manila: za
{homePageLink (siteName)}
i{tagLine}
. -
Blogger: za
<$BlogTitle$>
.
Zaraz za tym wstaw następujący kod:
<a class="skiplink" href="#startcontent">Przeskocz menu</a>
Następnie trzeba wstawić tag wskazujący miejsce docelowe dla powyższego odnośnika. Powinien on się znaleźć na samym początku głównej treści Twojej strony, to znaczy tuż przed pierwszym wpisem.
-
blog.pl: tuż przed zmienną
{blog}
. - niByLog: na samym końcu szablonu nagłówka bloga.
-
Movable Type: przed
<MTEntries>
. -
Greymatter: na szablonie „Main Index Template”, przed
{{logbody}}
. Na szablonie „Entry Page Templates”, przed{{entrymainbody}}
. -
Radio: przed
<%bodytext%>
. -
Manila: przed
{bodytext}
. -
Blogger: przed
<Blogger>
.
Format taga docelowego zależy od wersji HTML jakiej używasz. Sprawdź swój nagłówek DOCTYPE
, a następnie użyj jednego
z poniższych kodów:
Jeżeli używasz któregokolwiek wariantu HTML 4, dopisz ten kod:
<a name="startcontent"></a>
Jeżeli używasz któregokolwiek wariantu XHTML 1.0, użyj takiego kodu:
<a name="startcontent" id="startcontent"></a>
Jeżeli używasz XHTML 1.1, użyj takiego kodu:
<a id="startcontent"></a>
Pamiętaj, żeby taki odnośnik przeskakujący menu był na każdej stronie Twojej witryny; sprawdź wszystkie podstrony i szablony.
Zmodyfikowano: 16.07.2007, 01:50