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?
- Jadzia skorzysta. Kiedy JAWS czyta odnośnik ze zdefiniowanym atrybutem
accesskey
, informuje również o klawiszu skrótu. Na przykład, odnośnik <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 odnośnika przez naciśnięcie ALT+1, a następnie przejść na stronę główną naciskając ENTER. - 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 odnośników. Bill może nacisnąć ALT+1 i jego Mozilla natychmiast (nawet bez naciskania klawisza ENTER) przejdzie do strony wskazanej przez odnośnik 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ć: 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