Wykrywanie pułapek klawiaturowych
Znajdź miejsca, w których fokus zatrzymuje się bez możliwości wyjścia
Wykrywanie pułapek klawiaturowych to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Uwięzienie bez drogi wyjścia
Pułapka klawiaturowa to każde miejsce, do którego fokus może wejść, ale z którego nie można wyjść za pomocą klawiatury. Dla użytkownika bez myszy jest to ślepy zaułek. 🪤
Dlaczego to takie poważne
Uwięziony użytkownik może być zmuszony do ponownego załadowania całej strony, aby się wydostać. WCAG uznaje pułapkę bez wyjścia za niezgodność, a nie drobny błąd.
Typowi winowajcy
Pułapki często występują w rozbudowanych komponentach: niestandardowych selektorach daty, osadzonych edytorach i wtyczkach firm trzecich, które przejmują fokus i nigdy go nie oddają.
Uszkodzony modal
Okno dialogowe, które przechwytuje Tab, ale nie oferuje sposobu wyjścia, jest najczęstszą pułapką. Prawdziwy modal musi zamykać się klawiszem Escape.
Elementy iframe mogą pochłonąć fokus
Osadzona treść, taka jak film lub mapa, znajduje się w elemencie iframe. Niektóre takie elementy przejmują fokus i pozostawiają użytkownika krążącego wewnątrz bez wyjścia.
Wadliwe procedury obsługi zdarzeń
Skrypt wywołujący preventDefault dla klawisza Tab może zablokować zwykłe przechodzenie przeglądarki. Nagle fokus po prostu odmawia przejścia dalej.
el.addEventListener('keydown', e => e.preventDefault());Pułapka jednokierunkowa
Niektóre pułapki pozwalają klawiszowi Tab przechodzić do przodu, ale blokują Shift+Tab. Należy testować oba kierunki, ponieważ jednokierunkowa ścieżka nadal jest pułapką.
Celowe uwięzienie może być właściwe
Celowe utrzymywanie fokusu w otwartym modalu jest prawidłowe. Zasada mówi jednak, że zawsze musi istnieć wyraźne wyjście, na przykład Escape lub przycisk zamknięcia.
Jak je znaleźć
Test jest prosty i skuteczny. Należy przejść klawiszem Tab przez całą stronę, używając wyłącznie klawiatury, i ani razu nie sięgać po mysz, aby się wydostać.
Charakterystyczny znak
Jeśli fokus wciąż krąży wewnątrz jednego komponentu, a Tab nie przenosi go dalej, znaleziono pułapkę. Należy dokładnie zanotować miejsce, w którym użytkownik został uwięziony.
Napraw ścieżkę wyjścia
Rozwiązaniem jest przywrócenie drogi wyjścia: pozwolenie klawiszowi Tab przechodzić dalej, obsługa klawisza Escape oraz zwracanie fokusu po zamknięciu do elementu wyzwalającego, który otworzył warstwę.
Szybkie sprawdzenie
Proszę wskazać, co naprawdę definiuje pułapkę klawiaturową.
Podsumowanie: wykrywanie pułapek
Pułapka utrzymuje fokus bez możliwości wyjścia za pomocą klawiatury, przez co narusza WCAG. Należy przejść klawiszem Tab w obu kierunkach przez wszystkie elementy i zawsze zapewnić ścieżkę wyjścia. ✅
Często zadawane pytania
Czy lekcja „Wykrywanie pułapek klawiaturowych” jest bezpłatna?
Tak — pełny tekst „Wykrywanie pułapek klawiaturowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wykrywanie pułapek klawiaturowych”?
Znajdź miejsca, w których fokus zatrzymuje się bez możliwości wyjścia Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Wykrywanie pułapek klawiaturowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Tab, Shift+Tab, Enter, Spacja: podstawowe klawisze
- Widoczny fokus: nigdy nie ukrywaj obrysu
- Logiczna kolejność tabulatora podąża za treścią
- Wykrywanie pułapek klawiaturowych