W głąb dostępności

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 link 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.

Link 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 link przed menu (czy generalnie wszelkie linki 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 link 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 link nie wpływa na układ strony - jakby go w ogóle nie było.

Kto na tym skorzysta?

1. Marek skorzysta. Kiedy odwiedza Twoją stronę, Lynx pokaże ten link (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.
2. Jadzia skorzysta. Kiedy odwiedzi Twoją stronę, JAWS przeczyta ten link 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 linki 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ć linki 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 linku 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 linku, 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 link 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 linkiem do księgi gości oraz zmiennymi {linki} i {archiwum}.
• niByLog: miejsce wstawienia tego linku 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 miejse docelowe dla powyższego linku. 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:

1. Jeżeli używasz któregokolwiek wariantu HTML 4, dopisz ten kod:

   <a name="startcontent"></a>

2. Jeżeli używasz któregokolwiek wariantu XHTML 1.0, użyj takiego kodu:

   <a name="startcontent" id="startcontent"></a>

3. Jeżeli używasz XHTML 1.1, użyj takiego kodu:

   <a id="startcontent"></a>

Pamiętaj, żeby taki link przeskakujący menu był na każdej stronie Twojej witryny; sprawdź wszystkie podstrony i szablony.