Zasada 2: Funkcjonalność 2.1 Dostępność z klawiatury

2.1.1 Klawiatura

WCAG 2.1.1 Keyboard

W skrócie

Wszystko, co da się zrobić myszą, musi dać się zrobić samą klawiaturą: menu, przyciski, formularze, suwaki, okna dialogowe, odtwarzacze.

Poziom
A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: Obsługa klawiaturą

Komu i dlaczego to pomaga

Z klawiatury (lub urządzeń, które ją emulują – przełączników, sterowania głosem, czytników ekranu) korzystają osoby niewidome i z niepełnosprawnością ruchową. Element niedostępny z klawiatury dla nich nie istnieje.

  • Osoby niewidome
  • Osoby z niepełnosprawnością ruchową

Jak zrobić to dobrze

  • Używaj natywnych elementów: <button>, <a href>, <input>, <select> – mają obsługę klawiatury wbudowaną.
  • Własne komponenty buduj według wzorców WAI-ARIA Authoring Practices (obsługa klawiszy, role, stany).
  • Menu rozwijane otwieraj też kliknięciem/Enterem, nie tylko hoverem.

Najczęstsze błędy

  • „Przyciski” zrobione z <div> lub <span> z onclick, bez tabindex i obsługi Enter/Spacji.
  • Menu rozwijane otwierane tylko najechaniem myszą.
  • Własne suwaki, kalendarze i karuzele bez obsługi klawiatury.
  • Mapy i widgety osadzone z zewnątrz, które przechwytują klawiaturę.

Przykład w kodzie

Źle
<div class="btn" onclick="wyslij()">Wyślij</div>
Dobrze
<button type="button" onclick="wyslij()">Wyślij</button>

Jak to sprawdzić

  1. Odłóż mysz. Przejdź całą ścieżkę (np. wypełnienie formularza kontaktowego) tylko klawiszami Tab, Shift+Tab, Enter, Spacja, strzałki i Esc.
  2. Zanotuj każde miejsce, gdzie nie da się czegoś zrobić lub nie widać, gdzie jesteś.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

2.1.2

Bez pułapki na klawiaturę

Poziom A Wymagane prawem

Jeśli fokus klawiatury wejdzie w jakiś element (np. osadzony odtwarzacz, edytor, okno), musi dać się z niego wyjść samą klawiaturą.

2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).

2.4.3

Kolejność fokusu

Poziom A Wymagane prawem

Kolejność, w jakiej klawisz Tab przechodzi przez elementy, jest logiczna i zgodna z sensem strony.

4.1.2

Nazwa, rola, wartość

Poziom A Wymagane prawem

Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.

Ostatnia aktualizacja: .
Źródło: Understanding SC 2.1.1: Keyboard – oficjalne objaśnienie W3C (po angielsku).