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?

  1. 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.
  2. 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.

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.

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