W celu świadczenia usług na najwyższym poziomie stosujemy pliki cookies. Korzystanie z naszej witryny oznacza, że będą one zamieszczane w Państwa urządzeniu. W każdym momencie można dokonać zmiany ustawień Państwa przeglądarki. Zobacz politykę cookies.

Obsługa klawiaturą na stronach internetowych

Wszystkie interaktywne elementy na stronach internetowych (np. linki, przyciski, kontrolki) muszą być dostępne za pomocą samej klawiatury.

Ogólnie omawiamy ten temat w artykule Obsługa klawiaturą (jako jeden z tematów o elementach, które tworzą dostępność cyfrową).

Trzy główne wymagania

  1. Użytkownicy klawiatury muszą mieć dostęp do wszystkich elementów interfejsu.
  2. Fokus (wyróżnienie wizualne elementu, który użytkownik wybiera za pomocą klawiatury) musi być widoczny i spójnie wprowadzony na całej stronie.
  3. Żaden element na stronie nie może zablokowywać fokusu (tzw. pułapka klawiaturowa) i uniemożliwić użytkownikowi dalszą nawigację.

Podstawowe klawisze i skróty klawiaturowe do nawigacji po stronie internetowej

  • Tab — przejdź do kolejnego elementu;
  • Shift+Tab — przejdź do poprzedniego elementu;
  • Enter — aktywuj link lub przycisk, na którym jest fokus;
  • Spacja — zaznacz lub odznacz pole wyboru, rozwiń listę rozwijaną bądź aktywuj przycisk, na którym jest fokus;
  • Klawisze strzałek w górę / w dół — przechodź między przyciskami opcji, czasem także do nawigacji po podelementach menu rozwijanego;
  • Klawisze strzałek w prawo / w lewo — do obsługi odtwarzaczy multimediów (np. by przewijać do przodu i w tył, podgłaśniać i ściszać), czasem także do nawigacji po elementach menu;
  • Escape — zamknij element, który pojawił się dynamicznie (np. rozwinięcie menu, okno dialogowe), po czym fokus wraca do elementu, który wywołał taką akcję.

Za pomocą tych przycisków i skrótów możesz przechodzić po elementach interaktywnych, takich jak linki, przyciski czy pola formularzy. Za pomocą tabindex możesz sprawić, że kursor zatrzyma się na innym elemencie (np. <div>), ale działań takich należy unikać. Omawiamy ten temat w Kolejność nawigacji i odczytu na stronach internetowych.

Widoczny fokus

Każda z przeglądarek internetowych ma własny domyślny wygląd fokusu (np. w Chrome jest to jasnoniebieska ramka). Możesz go wyłączyć za pomocą outline:none w CSS, wyłącznie, jeśli zapewnisz fokus o lepsze widoczności niż domyślny.

Może on mieć formę na przykład czarnego tekstu na żółtym tle.

a {
 color: black;
 background-color: white;
 text-decoration: underline
 }

 a:focus {
color: yellow;
background-color: black;
text-decoration: none
}


Logotypy związane z finansowaniem projektu, w ramach którego powstał ten artykuł – Fundusze Europejskie Wiedza Edukacja Rozwój, Rzeczpospolita Polska, Europejski Fundusz Społeczny

{"register":{"columns":[]}}