Dostępność cyfrowa

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

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ę.

• 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.

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
}