Nawigacja przy pomocy klawiatury jest szybsza niż powolne klikanie myszką. Pokazujemy jak zaimplementować skróty klawiszowe na stronie i w webaplikacji.
Podstawową obsługę klawiatury oferuje sam język HTML. Elementy takie jak a, area, button, input,
label, legend i textarea mogą zawierać atrybut accesskey, który określa tzw. klawisz dostępu, po wciśnięciu którego przeglądarka ustawi focus na tym elemencie. Ponadto jeśli klawisz dostępu wskazuje na link, to większość przeglądarek przejdzie do tego linku. W kodzie wystarczy dodać:
Strona główna
Aby nie dublować skrótów systemowych zalecane jest użycie cyfr, chociaż może to być również litera (pojedyncza). Zwyczajowo stosuje się następujące klawisze:
- 1 – strona główna
- 2 – główna zawartość podstrony
- 4 – formularz wyszukiwarki
- 9 – formularz kontaktowy
- 0 – lista klawiszy dostępowych
Jakie skróty klawiszowe?
Poszczególne przeglądarki definiują różne kombinacje pozwalające na dostanie się do klawiszy dostępowych.
W Internet Explorerze i Safari pod Windowsem accesskey uruchamia się poprzez wciśnięcie kombinacji klawiszy Alt+znak. W IE klawisz dostępu ustawia wskaźnik na elemencie, a Enter go aktywuje. W Firefoksie kombinacja to Alt+Shift+znak.
W Chrome skrót to Alt+znak, ale jako że Alt+cyfra przeskakują do wybranych kart, to standardowe skróty są nieużyteczne.
Opera działa inaczej. Po wciśnięciu kombinacji Shift+Esc wyświetli listę dostępnych skrótów. Następnie wciskamy znak aby przejść do kotwicy.
Skróty w webaplikacjach
Tworząc aplikację internetową będziemy jednak potrzebować bardziej rozbudowanych skrótów. Doskonałym przykładem są tu Google Docs, które kopiują skróty znane z innych edytorów (Ctrl+O otwiera dokument, a nie nową stronę) albo Gmail, w którym pojedyncze klawisze j i k służą do przeskakiwania do następnej/ poprzedniej wiadomości.
Do obsługi dowolnych skrótów klawiszowych na stronie lub aplikacji internetowej stosuje się JavaScript. My wykorzystamy prostą, skuteczną i darmową bibliotekę shortcut.js (http://www.openjs.com/scripts/events/keyboard_shortcuts/). Opiera się ona na przechwyceniu zdarzenia wskazującego na wciśnięcie klawisza, sprawdza, czy wciśnięte zostały dodatkowo Ctrl, Alt lub Shift i wywołuje wskazaną funkcję. Dzięki temu jest szybka i zajmuje mało miejsca.
Aby skorzystać z biblioteki, pobieramy ją i dodajemy w sekcji head dokumentu kod:
W najprostszej wersji zdefiniowanie nowego skrótu ogranicza się do dodania następującego kodu:
shortcut.add("Ctrl+A", function() {
...
});
Jeśli użytkownik wciśnie kombinację Ctrl+A wykonają się określone funkcje, przy czym drugi argument jest opcjonalny. Jeśli jednak nie zdefiniujemy go, to skrót nie zrobi nic. Warto zauważyć, że biblioteka „nadpisuje” w ten sposób domyślną funkcję przeglądarki (zaznaczenie całej treści).
Jako trzeci, opcjonalny argument możemy podać tablicę asocjacyjną zawierającą następujące klucze i wartości:
- ’type’ : 'keydown’ / 'keyup’ / 'keypress’ (zdarzenie na jakie zareaguje funkcja)
- ’disable_in_input’ : true / false (blokuje funkcję w inputach i textarea)
- ’target’ : nazwa (element reagujący na skrót)
- ’propagate’ : true / false (czy przeglądarka ma wykonać swoją funkcję)
- ’keycode’ : liczba (oczekuje na klawisz o podanym kodzie)
Dokładny opis biblioteki znajduje się w dokumentacji, ale jej obsługa nie powinna sprawiać trudności. Typowe sposoby wywołania umieściliśmy w przykładowym pliku.
Mimo że wdrożenie obsługi skrótów klawiszowych na stronie nie jest trudne, to musimy zastanowić się czy na pewno tego potrzebujemy. Skróty sprawdzą się w webaplikacjach, ale na zwykłych stronach mogą po prostu denerwować internautów przyzwyczajonych do standardowego zachowania przeglądarki, a nie wymyślonego przez webmastera. Jeśli zdecydujemy się na to, nie zapomnijmy o dodaniu informacji o dostępnych skrótach!
Pobierz przykład z artykułu:
