Wróć do wszystkich kryteriów

2.1.2 Brak pułapki na klawiaturę (ang.) No Keyboard Trap

Specjalizacje:

  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Multimedia
  • Przyciski i kontrolki

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Wytyczna ta stanowi absolutny fundament swobodnej nawigacji. Gwarantuje ona, że każda osoba korzystająca z interfejsu klawiatury może nie tylko wejść do dowolnego elementu interaktywnego, ale również bez przeszkód go opuścić. Realizacja tego kryterium eliminuje sytuacje, w których użytkownik zostaje „uwięziony” wewnątrz konkretnej sekcji strony (np. w oknie modalnym lub wtyczce społecznościowej) i nie może kontynuować przeglądania treści bez użycia myszy.

    Zastosuj tę zasadę, aby zapewnić płynny przepływ fokus na całej stronie. Jeśli komponent wymaga niestandardowych klawiszy do wyjścia, Twoim obowiązkiem jest poinformowanie o tym użytkownika, zanim tam trafi.

    Definicja w j. angielskim

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

    Definicja w j. polskim

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

    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.

    Fokus (ang.) focus
    –

    stan aktywnego wyróżnienia elementu interfejsu (takiego jak odnośnik, przycisk czy pole formularza), który wskazuje gotowość komponentu na przyjęcie akcji lub danych wprowadzanych przez użytkownika.

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

    • Osoby niewidome: Korzystają one z czytników ekranu (np. NVDA), które bazują na nawigacji klawiaturowej. Zablokowanie fokusu sprawia, że reszta serwisu staje się dla nich „niewidzialna”.
    • Osoby z niepełnosprawnościami ruchowymi: Użytkownicy z drżeniem rąk lub ograniczoną precyzją ruchów używają specjalistycznych emulatorów klawiatury. Pułapka klawiaturowa uniemożliwia im jakąkolwiek dalszą interakcję ze stroną.
    • Osoby słabowidzące: Często mają trudności ze śledzeniem małego kursora myszy na ekranie i preferują przewidywalną nawigację klawiszową.
    • Użytkownicy z zaburzeniami poznawczymi: Nagła utrata kontroli nad nawigacją i brak jasnej drogi wyjścia powoduje dezorientację oraz silną frustrację.
    • Osoby w sytuacjach tymczasowych: Każdy, kto korzysta z uszkodzonej myszy, (ang.) trackpadu lub po prostu preferuje szybkość pracy z klawiaturą, zyska na przewidywalności interfejsu.

    Zasady wdrażania i wymagania techniczne

    Aby spełnić kryterium 2.1.2, trzymaj się następujących reguł:

    • Standardowe i niestandardowe metody wyjścia: W większości przypadków klawisze Tab oraz Shift + Tab muszą umożliwiać sprawne wejście i wyjście z komponentu. Klawisz Esc powinien być domyślnym sposobem zamykania wszelkich nakładek. Jeśli do opuszczenia elementu wymagane jest coś więcej niż standardowe klawisze, użytkownik musi zostać wyraźnie o tym poinformowany przed wejściem w interakcję z danym komponentem.
    • Zarządzanie oknami modalnymi: Okna typu (ang.) Modal mogą celowo ograniczać fokus do swojej zawartości, ale muszą oferować klawiaturowy sposób na ich zamknięcie (np. klawisz Esc lub dostępny przycisk „Zamknij”), co przywróci fokus do miejsca, z którego otwarto okno.
    • Osadzone aplikacje i widżety: W przypadku umieszczenia na stronie zewnętrznych zasobów w <iframe> (np. odtwarzaczy, gier lub map) upewnij się, że nie przechwytują one fokusu na stałe. Jeśli do opuszczenia takiego elementu potrzebna jest specyficzna kombinacja klawiszy (np. Ctrl + M), instrukcja ta musi być widoczna i dostępna cyfrowo jeszcze przed wejściem w interakcję z modułem.

    Wyjątki i sytuacje szczególne

    Wymóg ten nie posiada wyjątków co do samej możliwości wyjścia, natomiast dopuszcza stosowanie niestandardowych kombinacji klawiszy (np. Ctrl + M), ale wyłącznie pod warunkiem, że użytkownik zostanie wyraźnie poinstruowany o alternatywnej, skutecznej metodzie opuszczenia danego obszaru.

    Przykłady implementacji

    Najczęstsze błędy

    • Brak obsługi klawisza Esc: Projektowanie nakładek, których nie da się zamknąć bez użycia myszy.
    • Uwięzienie w <iframe>: Brak zdefiniowanej metody wyjścia z osadzonej treści zewnętrznej.
    • Niejasne instrukcje: Brak informacji o niestandardowej metodzie wyjścia (np. konieczności użycia skrótu klawiszowego).
    • Błędne pętle fokusu: Tworzenie skryptów, które po ostatnim elemencie w oknie modalnym „gubią” fokus zamiast wrócić na jego początek lub go zamknąć.
    • Błędne zarządzanie fokusem po przeładowaniu: Dynamiczne zmiany treści, które sprawiają, że fokus zostaje uwięziony w nieistniejącym już elemencie.
    • Ukryte przyciski zamknięcia: Nadawanie przyciskom „Zamknij” atrybutu tabindex="-1" lub ich całkowite ukrywanie przed technologiami wspomagającymi.
    • F10: Występuje, gdy strona łączy różne technologie (np. (ang.) Java applets, (ang.) PDF, (ang.) Flash) w sposób, który więzi użytkownika wewnątrz jednego formatu, uniemożliwiając powrót do dokumentu nadrzędnego.

    Najlepsze praktyki

    • Stawiaj na natywny HTML: Wykorzystuj znacznik <dialog>, który posiada wbudowane mechanizmy poprawnego zarządzania fokusem.
    • Wizualizuj aktywność: Zawsze zapewnij wyraźny wskaźnik fokus, aby użytkownik wiedział, gdzie się znajduje.
    • Projektuj wzorcowo: Implementuj sprawdzone wzorce (ang.) WAI-ARIA Authoring Practices dla wszystkich niestandardowych komponentów.
    • Testuj na wczesnym etapie: Regularne sprawdzanie nawigacji samą klawiaturą pozwala wykryć pułapki przed wdrożeniem skomplikowanej logiki.

    Metody testowania

    • Testowanie manualne: Odłóż mysz i sprawdź, czy możesz przejść przez wszystkie interaktywne elementy za pomocą klawiszy Tab oraz Shift + Tab i czy zawsze masz drogę wyjścia.
    • NVDA: Uruchom czytnik ekranu i zweryfikuj, czy słyszysz instrukcje dotyczące obsługi złożonych komponentów i wyjścia z nich.
    • ANDI.js: Wykorzystaj moduł (ang.) „Tab Order”, aby sprawdzić, czy ścieżka nawigacji nie wpada w nieskończoną pętlę bez możliwości wyjścia.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w drzewie DOM, czy skrypty obsługujące zdarzenia klawiatury (np. onkeydown) nie blokują domyślnego zachowania przeglądarki w sposób uniemożliwiający nawigację.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 interaktywnych elementów. Twoim zadaniem jest sprawdzenie, czy użytkownik klawiatury może swobodnie wejść i wyjść z każdego komponentu.

    Jak to sprawdzić?

    1. Użyj klawisza Tab aby przejść do elementu.
    2. Aktywuj element (przycisk, link, pole formularza).
    3. Spróbuj wyjść używając Tab, Shift+Tab lub Esc.
    4. Jeśli utkniesz i nie możesz wyjść klawiaturą – to pułapka!

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura ( Tab, Shift+Tab, Esc, Enter), Narzędzie deweloperskie (ang.) Developer Tools, NVDA, ANDI.js

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

    #1 BŁĄD

    Problem: Modal nie ma przycisku zamknięcia i nie obsługuje klawisza Escape. Fokus jest zamknięty wewnątrz (focus trap) bez możliwości wyjścia.
    Dlaczego: Użytkownik klawiatury jest całkowicie uwięziony. Jedyny sposób na wyjście to odświeżenie strony (F5) lub użycie myszy.
    Naprawa: Dodaj przycisk zamknięcia i obsługę klawisza Escape. Focus trap jest OK, ale musi być sposób na wyjście.

    #2 DOBRZE

    Dlaczego: Modal używa focus trap (fokus krąży po elementach wewnątrz), ale zapewnia dwa sposoby wyjścia:

    • Przycisk zamknięcia (X)
    • Klawisz Escape

    Po zamknięciu fokus wraca do przycisku otwierającego. Użytkownik ma pełną kontrolę.

    #3 DOBRZE

    Dlaczego: Pole formularza pokazuje komunikat o błędzie, ale nie blokuje klawisza Tab. Użytkownik może zdecydować, czy chce poprawić błąd teraz, czy wrócić do pola później. Ma swobodę nawigacji.

    #4 BŁĄD

    Problem: Pole blokuje klawisz Tab gdy wartość jest pusta.
    Dlaczego: Użytkownik nie może wyjść z pola dopóki nie wpisze imienia. To pułapka – co jeśli użytkownik chce przerwać lub przejść do innego pola? Nie może kontynuować nawigacji.
    Naprawa: Nie blokuj Tab. Pokazuj błędy, ale pozwól użytkownikowi na swobodną nawigację.

    #5 BŁĄD

    Problem: Widget blokuje klawisz Tab (i prawdopodobnie wszystkie inne klawisze).
    Dlaczego: Użytkownik wchodzi do widgetu i nie może z niego wyjść klawiaturą. Brak instrukcji alternatywnej metody wyjścia (np. Escape). Klasyczna pułapka.
    Naprawa: Jeśli widget używa własnej nawigacji (np. strzałek), nie blokuj Tab. Dodaj widoczną instrukcję jak wyjść lub obsłuż Escape.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów