Formatowanie niedokończone.

Dzień 15: Definiowanie klawiszy skrótu

Jedną z mniej znanych cech HTML jest atrybut accesskey dla odnośnikó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 odnośnika, Twoja przeglądarka przejdzie do tego odnośnika; jeżeli jest przypisany do pola formularza, kursor ustawi się w tym polu. Niektóre przeglądarki (np. Mozilla) powodują automatyczne wywołanie odnośnika 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 (odnośnik 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?

Jak to zrobić: odnośnik do strony głównej

blog.pl: W wielu standardowych szablonach strona archiwum nie ma w ogóle odnośnika 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 odnośnik do strony głównej już istnieje, to wystarczy go uzupełnić o accesskey="1". Strony komentarzy oraz księgi gości mają zdefiniowane odnośniki 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 odnośnika 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 <>. Prawdopodobnie będzie to odnośnik, 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 odnośnika (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 odnośnik (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 odnośnik do przeskoczenia menu strony, przypisz mu accesskey="2".

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

Jak to zrobić: kontakt

Masz odnośnik 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ą odnośnik do strony kontaktowej (ikonka koperty) generowany przez makro <%radio.macros.mailto ()%>. Aby dodać mu obsługę skrótu, należy zmodyfikować treść tego makra:

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

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

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>")

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)

Jukka Korpela: Improving accessibility with accesskey in HTML forms and links. Artykuł wyjaśnia sposób zastosowania accesskey w odnośnikach i formularzach, oraz podaje kilka „standardowych” sposobów przypisania klawiszy. Paul Bohman: Access keys, IE6. Fragment dyskusji na temat accesskey na Web Accessibility Forum Mailing List. WATS.ca: Accesskeys and Reserved Keystroke Combinations. Lista klawiszy skrótów zarezerwowanych w różnych przeglądarkach i programach udźwiękawiających.



Zmodyfikowano: 24.08.2007, 19:57