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 "przeskoczenia" menu, prowadzący od razu do głównej treści, jest zwykłym tagiem <a> jak każdy inny link, ale dzięki odpowiedniemu ustawieniu stylów CSS jest niewidoczny w przeglądarkach graficznych. Taki link 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 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.
- 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.
Następnie zdefiniuj regułę CSS dla linków przeskakujących menu tak, aby były niewidoczne w przeglądarkach graficznych. Jeżeli masz zewnętrzny plik ze stylami, umieść tą regułę na jego końcu. (Jeżeli masz wiele zewnętrznych plików ze stylami, umieść tą regułę w pliku zgodnym z Netscape 4.) Jeżeli masz style zdefiniowane w tagu <style> w szablonie strony, dodaj tą regułę na początku, zaraz za tagiem <style>.
.skiplink {display:none}
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 link:
<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:
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 link przeskakujący menu był na każdej stronie Twojej witryny; sprawdź wszystkie podstrony i szablony.