accesskey
Skrót klawiaturowy, który przenosi fokus do elementu albo od razu go aktywuje.
- Dotyczy
- Wszystkie elementy HTML, ale sens ma na linkach, przyciskach i polach formularzy
Przykład
#<style>
p { margin: 0 0 12px; }
kbd { padding: 1px 6px; border: 1px solid #555; border-radius: 4px; font-size: 12px; }
</style>
<p><label>Imię <input type="text" name="name" accesskey="i"></label> <kbd>I</kbd></p>
<p><label>E-mail <input type="email" name="email" accesskey="m"></label> <kbd>M</kbd></p>
<button type="button" accesskey="w" onclick="this.textContent = 'Wysłano zgłoszenie'">
Wyślij <kbd>W</kbd>
</button>Kliknij w podgląd, a potem naciśnij Alt + I (Chrome i Edge na Windows), Alt + Shift + I (Firefox) albo Control + Option + I (Mac). Fokus trafi do pola „Imię”. Skrót z literą W od razu kliknie przycisk.
Definicja i zastosowanie
#Atrybut accesskey przypisuje elementowi klawisz dostępu, czyli skrót klawiaturowy. Wartością jest pojedynczy znak, najczęściej litera lub cyfra. Po naciśnięciu skrótu przeglądarka ustawia fokus na elemencie, a przyciski i linki zwykle od razu aktywuje, tak jakby ktoś je kliknął.
Sam znak to tylko część skrótu. Resztę dokłada przeglądarka: w Chrome i Edge na Windows naciskasz Alt i znak, w Firefoksie Alt, Shift i znak, a na Macu Control, Option i znak. Strona nie ma na to wpływu, więc jeśli opisujesz skróty na ekranie, uwzględnij różne przeglądarki.
Klawisze dostępu są dziś rzadko używane. Mogą kolidować ze skrótami przeglądarki, systemu i czytników ekranu, a użytkownicy zwykle nie wiedzą o ich istnieniu, bo przeglądarka nigdzie ich nie pokazuje. Najlepiej sprawdzają się w aplikacjach, z których ktoś korzysta codziennie, na przykład w panelu obsługi zamówień, i to pod warunkiem, że skróty są opisane.
Składnia
#<element accesskey="znak">…</element>Jak nacisnąć klawisz dostępu
#Chrome i Edge na Windows
Alt + znak
Najkrótsza kombinacja, ale łatwo o konflikt ze skrótami przeglądarki, np. ze skrótem Alt + D, który przenosi do paska adresu.Firefox na Windows i Linuksie
Alt + Shift + znak
Dodatkowy Shift zmniejsza ryzyko konfliktu ze skrótami menu przeglądarki.Safari, Chrome i Firefox na Macu
Control + Option + znak
Ta sama kombinacja we wszystkich popularnych przeglądarkach na macOS.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli dodajesz klawisze dostępu, pokaż je na ekranie, np. podkreśloną literą w etykiecie albo listą skrótów. Skrót, o którym nikt nie wie, nikomu nie pomoże.
- Nie używaj znaków, które przeglądarki mają już zajęte, np. D i F, i nie przypisuj tego samego znaku dwóm elementom.
- W aplikacjach webowych skróty często lepiej obsłużyć w skrypcie przez zdarzenie
keydown. Masz wtedy pełną kontrolę nad kombinacją klawiszy i jej opisem.
Powiązane hasła
#- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- onkeydownUruchamia kod JavaScript w chwili naciśnięcia klawisza. Służy do skrótów klawiszowych i obsługi klawiszy takich jak Enter czy Escape.
- <kbd>Dane wprowadzane przez użytkownika: klawisze, skróty klawiszowe i polecenia do wpisania.
- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
- autofocusUstawia fokus na elemencie od razu po wczytaniu strony albo po otwarciu okna dialogowego.
Widzisz błąd albo brakuje przykładu? Napisz do nas.