Escape do zamykania i przywracania fokusu
Zapewnij niezawodne wyjście, które przywraca użytkownika do poprzedniego miejsca.
Escape do zamykania i przywracania fokusu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 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.
Każdy modal potrzebuje sposobu wyjścia
Modal, którego nie można opuścić, jest pułapką. Użytkownicy oczekują szybkiego i niezawodnego sposobu na jego zamknięcie, bez konieczności szukania małego przycisku.
Escape to uniwersalny klawisz
Klawisz Escape jest powszechnie uznawanym skrótem do zamykania okna dialogowego. Użytkownicy klawiatury i czytników ekranu sięgają po niego w pierwszej kolejności, dlatego zawsze go obsługuj.
Natywny dialog obsługuje Escape
Natywny element dialog otwarty za pomocą showModal() automatycznie zamyka się po naciśnięciu Escape i wywołuje zdarzenie cancel, którego można nasłuchiwać w razie potrzeby.
dialog.addEventListener('cancel', onClose);Samodzielna obsługa Escape
W przypadku własnego modalu nasłuchuj zdarzenia keydown i zamykaj modal, gdy klawiszem jest Escape. To tylko kilka wierszy, ale nigdy z tego nie rezygnuj.
if (e.key === 'Escape') closeModal();Zapamiętaj, gdzie znajdował się fokus
Przed otwarciem modalu zapisz element, który miał fokus. document.activeElement to wyzwalający element, do którego później powrócisz.
const opener = document.activeElement;Przywróć fokus po zamknięciu
Po zamknięciu modalu przenieś fokus z powrotem na zapisany element wyzwalający. Ten etap przywracania fokusu sprawia, że zamknięcie jest płynne.
closeModal();
opener.focus();Dlaczego przywracanie ma znaczenie
Bez przywrócenia fokus przeskakuje na początek strony. Użytkownik traci swoje miejsce i musi ponownie przejść klawiszem Tab przez całą stronę. To frustrujące i możliwe do uniknięcia. 😕
Widoczny przycisk zamykania również
Samo Escape nie wystarczy. Umieść wyraźnie opisany przycisk zamykania, aby także użytkownicy myszy i ekranu dotykowego mieli oczywisty sposób wyjścia.
<button aria-label="Close dialog">×</button>Kliknięcie tła
Wiele modali zamyka się również po kliknięciu przyciemnionego tła. To przydatny dodatek, ale nigdy nie może zastępować Escape ani przycisku.
Zachowaj ostrożność przy destrukcyjnych działaniach
W przypadku okien potwierdzających ryzykowne działanie możesz wyłączyć szybkie zamknięcie, aby przypadkowe naciśnięcie Escape nie pominęło ważnej decyzji.
Przetestuj pełny cykl
Otwórz modal za pomocą klawiatury, naciśnij Escape i sprawdź, czy fokus wrócił dokładnie na element wyzwalający, od którego rozpoczęto. Taki pełny cykl jest celem. ✅
Szybkie sprawdzenie
Użytkownik otwiera modal przyciskiem i naciska Escape. Gdzie powinien znaleźć się fokus?
Podsumowanie: zamykaj prawidłowo
Dowiedziałeś się, jak obsługiwać Escape, udostępniać widoczny przycisk zamykania i przywracać fokus na elemencie otwierającym, aby zamknięcie nigdy nie pozostawiało użytkownika bez orientacji. 🎯
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Escape do zamykania i przywracania fokusu” jest bezpłatna?
Tak — pełny tekst „Escape do zamykania i przywracania fokusu” 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 „Escape do zamykania i przywracania fokusu”?
Zapewnij niezawodne wyjście, które przywraca użytkownika do poprzedniego miejsca. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Escape do zamykania i przywracania fokusu”?
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