Dzień 15: Definiowanie klawiszy skrótu

Jedną z mniej znanych cech HTML jest atrybut accesskey dla linków i elementów formularza. Umożliwia on zdefiniowanie klawisza skrótu dla odnośnika lub pola na formularzu. W systemie Windows skrót najczęściej wywołuje się w kombinacji z klawiszem ALT (czyli ALT + klawisz skrótu) a na Macintoshu z klawiszem Control. Jeżeli klawisz jest przypisany do linku, Twoja przeglądarka przejdzie do tego linku; jeżeli jest przypisany do pola formularza, kursor ustawi się w tym polu. Niektóre przeglądarki (np. Mozilla) powodują automatyczne wywołanie linku z przypisanym danym klawiszem skrótu, a inne (np. Internet Explorer) jedynie ustawiają kursor i wymagane jest jeszcze naciśnięcie klawisza Enter. Internet Explorer obsługuje skróty klawiszowe od wersji 4, Netscape od wersji 6. Opera dopiero od wersji 7 i to w dosyć dziwnej kombinacji - aktywacja skrótu w Operze 7 następuje przez naciśnięcie Shift + Esc i dopiero potem klawisza skrótu. Starsze przeglądarki po prostu ignorują atrybut accesskey bez żadnych efektów.

Nie ma jednolitych standardów, opisujących które klawisze powinny być przypisane do jakich elementów strony. Jednak do często używanych należą:

accesskey 1
Strona główna
accesskey 2
Przejście do głównej zawartości (link przeskakujący nawigację)
accesskey 4
Okienko przeszukiwania treści strony
accesskey 9
Kontakt z autorem

Atrybut accesskey może definiować dowolny klawisz - cyfrę, literę lub znak specjalny. Jednak ze względu na możliwość konfliktu ze skrótami już zdefiniowanymi w przeglądarce (np. pozycje menu są najczęściej osiągalne przez ALT+litera) bezpieczniej jest stosować skróty cyfrowe.

Kto na tym skorzysta?

  1. Jadzia skorzysta. Kiedy JAWS czyta link ze zdefiniowanym atrybutem accesskey, informuje również o klawiszu skrótu. Na przykład, link <a href="/" accesskey="1">Strona główna</a> zostałby odczytany jako "link: strona główna, ALT + 1". Jadzia może ustawić się na tym linku przez naciśnięcie ALT+1, a następnie przejść na stronę główną naciskając ENTER.
  2. Bill skorzysta. Bill od czasu zawału nie może używać myszki efektywnie, zatem podczas poruszania się po Internecie polega głównie na klawiaturze. Skróty klawiszowe są dla niego świetną pomocą przy przechodzeniu do częstych linków. Bill może nacisnąć ALT+1 i jego Mozilla natychmiast (nawet bez naciskania klawisza ENTER) przejdzie do strony wskazanej przez link opisany przy pomocy accesskey="1". (Uwaga: Mozilla nie ogłasza w żaden sposób jakie klawisze są dostępne na danej stronie. Powstaje więc pytanie: skąd Bill ma się o nich dowiedzieć? Będziemy to jeszcze omawiać w dalszej części.)

Jak to zrobić: link do strony głównej

  • blog.pl: W wielu standardowych szablonach strona archiwum nie ma w ogóle linku do strony głównej. Zatem należy go utworzyć z nazwy bloga, np.:

    <a href="/" class="pageheader" accesskey="1">{ksywa} blog</a>

    Jeżeli taki link do strony głównej już istnieje, to wystarczy go uzupełnić o accesskey="1". Strony komentarzy oraz księgi gości mają zdefiniowane linki do strony głównej, jednak nie posiadają atrybutu accesskey i należy go dodać:

    <a href="../" accesskey="1">[strona główna]</a>

  • Movable Type: Domyślny szablon nie ma linku do strony głównej, zatem trzeba go zrobić na podstawie nazwy bloga. Poszukaj w szablonie kodu <$MTBlogName$> i zamień go na:

    <a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>

  • Radio: Poszukaj w szablonie zmiennej <%siteName%>. Prawdopodobnie będzie to link, np. taki:

    <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a>

    Trzeba mu dodać atrybut accesskey, np. tak:

    <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none" accesskey="1"><%siteName%></a>

  • Blogger: Poszukaj w szablonie zmiennej <$BlogTitle$>. Jeżeli jest ona użyta w linku (zamknięta w tagu <a>), wystarczy, że dodasz accesskey="1", podobnie jak w przykładach powyżej. Jeżeli <$BlogTitle$> nie jest w tagu <a> to należy go przerobić na link (wstaw poprawny adres Twojej strony):

    <a href="http://adres/twojej/strony/głównej" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

Jak to zrobić: przeskakiwanie menu

Jeżeli masz link do przeskoczenia menu strony, przypisz mu accesskey="2".

<a class="skiplink" href="#startcontent" accesskey="2">Przeskocz menu</a>

Jak to zrobić: kontakt

Masz link do formularza kontaktowego albo do swojego adresu e-mail? Jeśli tak, przypisz mu accesskey="9".

<a href="mailto:ja@mojadomena.pl" accesskey="9">Wyślij e-mail</a>

Blogi oparte na systemie Radio mają link do strony kontaktowej (ikonka koperty) generowany przez makro <%radio.macros.mailto ()%>. Aby dodać mu obsługę skrótu, należy zmodyfikować treść tego makra:

  1. Otwórz właściwą aplikację Radio klikając prawym klawiszem myszy ikonkę Radio w trayu i wybierając "Open Radio".

  2. W menu "Tools" wybierz "Developers", "Jump..." (Control+J) i przejdź do "radio.macros.mailto" (bez cudzysłowu).

  3. Zlokalizuj linię:

    return ("<a href=\"" + url + "\" title=\"" + tooltip + "\"><img src=\"http://static.userland.com/shortcuts/images/qbullets/mailto.gif\" width=\"14\" height=\"10\" border=\"0\" alt=\"" + tooltip + "\"></a>")

    i zamień ją na:

    return ("<a href=\"" + url + "\" title=\"" + tooltip + "\" accesskey=\"9\"><img src=\"http://static.userland.com/shortcuts/images/qbullets/mailto.gif\" width=\"14\" height=\"10\" border=\"0\" alt=\"" + tooltip + "\"></a>")

  4. Wciśnij klawisz "Compile" i zamknij okno.

Atrybuty accesskey powinny być zdefiniowane tak samo na wszystkich stronach; pamiętaj, żeby zrobić zmiany we wszystkich koniecznych szablonach.

Zobacz także (strony w języku angielskim)

 
<< Dzień 14: Dodawanie tytułów do linków | Spis treści | Dzień 16: Bez wymuszania nowych okien >>