Uwięzienie fokusu w oknie modalnym
Nie pozwól, aby klawisz Tab przenosił fokus na stronę znajdującą się w tle.
Uwięzienie fokusu w oknie modalnym to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 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.
Dlaczego fokus musi pozostać wewnątrz
Gdy modal jest otwarty, klawiaturowy fokus powinien pozostać w jego obrębie. Jeśli klawisz Tab przeniesie fokus na stronę znajdującą się w tle, osoby niewidome zgubią się w niewidocznej dla nich treści.
Natywny element pomaga
Prawdziwy element dialog otwarty za pomocą showModal() automatycznie przechwytuje fokus, co jest jednym z ważnych powodów, aby preferować go zamiast div.
Gdy tworzysz własny modal
Jeśli utworzysz własny modal na bazie div, musisz samodzielnie przechwycić fokus, ponieważ nic nie powstrzyma klawisza Tab przed przeniesieniem fokusu na stronę.
Przenieś fokus do środka po otwarciu
Najpierw przenieś fokus do modalu w chwili jego otwarcia — zwykle na pierwszy element sterujący lub nagłówek — aby użytkownik rozpoczął w odpowiednim miejscu.
modal.querySelector('button').focus();Znajdź elementy, które mogą otrzymać fokus
Zbierz elementy modalu, które mogą otrzymać fokus: linki, przyciski, pola tekstowe i wszystko, co ma tabindex. Potrzebujesz pierwszego i ostatniego elementu, aby utworzyć pętlę.
modal.querySelectorAll('a, button, input, [tabindex]');Utwórz pętlę od ostatniego do pierwszego
Gdy użytkownik naciśnie Tab na ostatnim elemencie, przenieś fokus z powrotem na pierwszy. W ten sposób użytkownik zostanie zawrócony, zamiast opuścić modal.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Utwórz pętlę od pierwszego do ostatniego
Obsłuż również Shift+Tab na pierwszym elemencie: przenieś fokus na ostatni, aby także poruszanie się wstecz pozostało ograniczone do modalu.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Zablokuj domyślne działanie klawisza Tab
Na granicach musisz wywołać preventDefault(), w przeciwnym razie przeglądarka przeniesie fokus poza modal, zanim kod zdąży go przekierować.
e.preventDefault();Pamiętaj o wyłączonych i ukrytych elementach
Podczas wybierania pierwszego i ostatniego elementu pomijaj elementy disabled lub ukryte, ponieważ w rzeczywistości nie mogą otrzymać fokusu.
Nie zapomnij o tle
Przechwytywanie fokusu powinno iść w parze z ustawieniem strony w tle jako inert, aby podczas otwarcia modalu nawet przypadkowe kliknięcie ani czytnik ekranu nie mogły się do niej dostać.
Przetestuj za pomocą klawiatury
Przechodź klawiszem Tab przez cały modal i obserwuj, jak obramowanie fokusu krąży bez opuszczania go. Ta pełna runda potwierdza, że przechwytywanie działa. ✅
Szybkie sprawdzenie
Utworzyłeś modal na bazie div. Co musisz zrobić, aby zatrzymać klawisz Tab wewnątrz?
Podsumowanie: zatrzymaj fokus wewnątrz
Dowiedziałeś się, jak przenieść fokus do środka po otwarciu i utworzyć pętlę na obu granicach, aby użytkownicy klawiatury pozostali w modalu do chwili, gdy zdecydują się go zamknąć. 🎯
Często zadawane pytania
Czy lekcja „Uwięzienie fokusu w oknie modalnym” jest bezpłatna?
Tak — pełny tekst „Uwięzienie fokusu w oknie modalnym” 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 „Uwięzienie fokusu w oknie modalnym”?
Nie pozwól, aby klawisz Tab przenosił fokus na stronę znajdującą się w tle. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Uwięzienie fokusu w oknie modalnym”?
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
- Role dialogu i natywny element dialog
- Uwięzienie fokusu w oknie modalnym
- Escape do zamykania i przywracania fokusu
- Nieaktywne tło i aria-modal