Wróć do wszystkich kryteriów

2.1.1 Klawiatura (ang.) Keyboard

Specjalizacje:

  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Formularze
  • Nawigacja
  • Przyciski i kontrolki

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym celem tej wytycznej jest zapewnienie, że każdy użytkownik może w pełni obsługiwać Twoją stronę internetową, korzystając wyłącznie z klawiatury. W praktyce oznacza to, że każda interaktywna funkcja – od kliknięcia w link, przez wysłanie formularza, aż po obsługę odtwarzacza wideo – nie może wymagać użycia myszy.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#keyboard

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#klawiatura

    Słownik pojęć

    Interfejs klawiatury  (ang.) Keyboard Interface
    –

    Mechanizm używany przez oprogramowanie do odbierania danych wejściowych w postaci naciśnięć klawiszy. Co istotne, interfejs ten może być obsługiwany przez fizyczną klawiaturę, ale także przez oprogramowanie do rozpoznawania mowy, systemy (ang.) sip-and-puff czy klawiatury ekranowe.

    Funkcjonalność (ang.) Functionality
    –

    Wszystkie procesy i wyniki, które użytkownik może osiągnąć poprzez swoje działanie (np. wysłanie formularza, nawigacja po menu).

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby niewidome: Nie korzystają z urządzeń wskazujących wymagających koordynacji wzrokowo-ruchowej; polegają wyłącznie na poleceniach klawiaturowych i czytnikach ekranu ((ang.) Screen Readers).
    • Osoby z niepełnosprawnościami ruchowymi: Użytkownicy z drżeniem rąk lub ograniczoną precyzją, którzy zamiast myszy używają specjalistycznych emulatorów klawiatury.
    • Osoby słabowidzące: Często mają trudności ze śledzeniem małego kursora myszy na ekranie i preferują przewidywalną nawigację klawiszową.
    • (ang.) Power users: Osoby bez niepełnosprawności, które używają skrótów klawiaturowych dla zwiększenia wydajności pracy.
    • Użytkownicy urządzeń mobilnych: Korzystający z zewnętrznych klawiatur podłączanych do tabletów lub telefonów.

    Zasady wdrażania i wymagania techniczne

    Aby spełnić to kryterium, przestrzegaj poniższych zasad technicznych:

    • Zapewnij alternatywę dla wskaźnika: Każda akcja wykonywana myszą (np. kliknięcie, przeciąganie, zmiana rozmiaru) musi mieć swój odpowiednik klawiaturowy.
    • Wykorzystuj natywny HTML: Zawsze wybieraj standardowe znaczniki takie jak <a>, <button>, <input> czy <select>, ponieważ przeglądarki automatycznie zapewniają im obsługę klawiatury.
    • Zadbaj o widoczny fokus: Nigdy nie usuwaj obramowania fokusu za pomocą CSS (outline: none) bez przygotowania wyraźnej, kontrastowej alternatywy.
    • Zachowaj logiczną kolejność tabulacji: Fokus powinien przemieszczać się w sposób przewidywalny, zazwyczaj od lewej do prawej i od góry do dołu, zgodnie z wizualnym układem strony.
    • Programuj niestandardowe komponenty: Jeśli tworzysz autorskie widżety (np. z elementu <div>), nadaj im atrybut tabindex="0", odpowiednie role ARIA oraz obsłuż zdarzenia keydown dla klawiszy enter i spacja.
    • Wdróż linki pomijające ((ang.) Skip links): Dodaj na początku strony niewidoczny link, który pojawia się po otrzymaniu fokusu i pozwala przeskoczyć nawigację bezpośrednio do treści głównej.

    Wyjątki i sytuacje szczególne

    Wyjątek stanowią funkcje, których istota zależy od ścieżki ruchu użytkownika, a nie tylko od punktu początkowego i końcowego.

    • Przykład: Rysowanie odręczne w aplikacji graficznej lub gra wymagająca płynnego ruchu kursorem (np. symulator lotu helikopterem).
    • Ważne: Większość standardowych interakcji (suwaki, menu, (ang.) drag-and-drop) można i należy dostosować do obsługi klawiaturowej.

    Przykłady implementacji

    Najczęstsze błędy

    • F54: Stosowanie wyłącznie zdarzeń specyficznych dla urządzeń wskazujących (np. onmousedown, onmouseover, gesty dotykowe) do obsługi kluczowych funkcji.
    • F55: Używanie skryptów, które automatycznie usuwają fokus z elementu w momencie jego otrzymania.
    • Pułapka klawiaturowa ((ang.) Keyboard Trap): Brak możliwości wyjścia z komponentu (np. kalendarza lub modala) za pomocą klawisza Tab lub Esc.
    • F42: Emulowanie linków za pomocą innych elementów bez zapewnienia ich pełnej obsługi klawiaturowej.

    Najlepsze praktyki

    • Zasada (ang.) „No ARIA is better than Bad ARIA”: Stosuj atrybuty ARIA tylko wtedy, gdy natywne elementy HTML nie wystarczają.
    • Instrukcje obsługi: W przypadku bardzo złożonych komponentów (np. edytorów online) podaj skróconą informację o dostępnych skrótach klawiaturowych.
    • Testowanie bez myszy: Regularnie sprawdzaj działanie serwisu, odłączając mysz i korzystając wyłącznie z klawiatury.
    • Zgodność z konwencjami platformy: Choć WCAG dopuszcza niestandardowe mapowanie klawiszy (np. przycisk reagujący tylko na Enter), dobrą praktyką jest przestrzeganie standardów przeglądarkowych (reakcja na Enter i Spacja).
    • Widoczność fokusu: Projektuj wskaźniki fokusu tak, aby były wyraźne nawet dla osób z dużą wadą wzroku (kontrast i rozmiar).

    Metody testowania

    • NVDA: Zweryfikuj, czy czytnik ekranu informuje o stanie elementów (np. czy przycisk jest aktywny) podczas nawigacji klawiszowej.
    • Testowanie manualne: Sprawdź, czy możesz przejść przez cały proces (np. od znalezienia produktu do płatności) używając tylko klawiszy Tab, Shift+Tab, Enter i strzałek.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź, czy elementy interaktywne mają przypisane odpowiednie (ang.) Event Listeners dla zdarzeń klawiatury.
    • (ang.) WAVE Evaluation Tool: Użyj widoku (ang.) Structure, aby ocenić kolejność tabulacji i wykryć elementy „nieklikalne” dla klawiatury.
    • ANDI.js: Wykorzystaj moduł (ang.) „Keyboard”, aby zweryfikować wizualnie ścieżkę fokusu i wykryć ukryte elementy interaktywne.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 interaktywnych elementów. Twoim zadaniem jest sprawdzenie, czy każdy z nich jest dostępny wyłącznie za pomocą klawiatury (bez użycia myszy).

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.

    Jak to sprawdzić?

    1. Użyj klawisza Tab aby przejść do każdego elementu.
    2. Sprawdź czy element otrzymuje widoczny fokus (obramowanie/podświetlenie).
    3. Spróbuj aktywować element klawiszem Enter lub Spacja.
    4. Jeśli element nie jest osiągalny przez Tab lub nie reaguje na klawisze – nie spełnia kryterium 2.1.1.

    Proponowane narzędzia: Klawiatura (Tab, Enter, Spacja), Narzędzie deweloperskie (ang.) Developer Tools, NVDA, (ang.) WAVE Evaluation Tool, ANDI.js

    Link: https://pdc.ambiscale.com/training/wcag-2-1-1/

    #1 DOBRZE

    Dlaczego: To natywny element <button>, który automatycznie:

    • Jest dostępny przez Tab
    • Pokazuje widoczny fokus
    • Reaguje na Enter i Spacja
    • Jest ogłaszany przez czytniki ekranu jako „przycisk”

    #2 BŁĄD

    Problem: Element <div> z onclick nie jest dostępny klawiaturą.
    Dlaczego: Element <div> bez atrybutu tabindex nie może otrzymać fokusu klawiatury. Nawet gdyby dodać tabindex="0", trzeba by jeszcze obsłużyć klawisze Enter i Spacja w JavaScript oraz dodać odpowiednią rolę ARIA.
    Naprawa: Użyj natywnego <button> zamiast <div>.

    #3 DOBRZE

    Dlaczego: To natywny element <a href>, który:

    • Jest dostępny przez Tab
    • Aktywowany przez Enter
    • Ma prawidłową semantykę (link do innej lokalizacji)

    Uwaga: Linki są aktywowane tylko przez Enter, nie przez Spacja (w przeciwieństwie do przycisków).

    #4 BŁĄD

    Problem: Menu działa tylko na :hover (najechanie myszką).
    Dlaczego: Wyzwalacz to <div> bez tabindex, więc użytkownik klawiatury nie może nawet ustawić na nim fokusu. Menu nigdy się nie otworzy dla osób korzystających wyłącznie z klawiatury.
    Naprawa: Zamień na <button> i dodaj obsługę klawiatury (Enter otwiera, Escape zamyka, strzałki nawigują).

    #5 BŁĄD

    Problem: Obrazek <img> z onclick nie jest dostępny klawiaturą.
    Dlaczego: Podobnie jak <div>, element <img> bez tabindex nie otrzymuje fokusu klawiatury. Nawet z tabindex="0" trzeba by dodać obsługę klawiszy i rolę role="button".
    Naprawa: Użyj prawdziwego <button> z obrazkiem wewnątrz lub zamień obrazek na przycisk stylizowany CSS-em.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów