Przenoszenie fokusu po wykonaniu akcji
Przenieś fokus tam, gdzie użytkownik będzie go potrzebować w następnym kroku.
Przenoszenie fokusu po wykonaniu akcji 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.
Fokus jest kursorem użytkownika
Dla użytkowników klawiatury i czytników ekranu fokus wskazuje ich położenie na stronie. Po wykonaniu działania to Pan decyduje, gdzie ten punkt znajdzie się dalej.
Po co w ogóle przenosić fokus
Gdy przycisk ujawnia nową treść, fokus często pozostaje na swoim miejscu i użytkownik nie dowiaduje się, że coś się zmieniło. Przeniesienie fokusu prowadzi go do rezultatu.
Metoda focus
Fokus przenosi się w JavaScript, wywołując element.focus() na elemencie docelowym, do którego użytkownik ma przejść.
document.getElementById('results').focus();Najpierw umożliw fokusowanie elementu docelowego
Zwykły div nie przyjmuje fokusu, dlatego nadaj miejscu docelowemu tabindex="-1", aby skrypt mógł przenieść na nie fokus.
<div id="results" tabindex="-1">3 matches found</div>Przykład: pokaż i ustaw fokus
Po załadowaniu nowej treści pokaż ją, a następnie przenieś tam fokus, aby czytnik ekranu rozpoczął odczytywanie nowego obszaru. 🔎
panel.hidden = false;
panel.focus();Ustaw fokus na nagłówku, nie na całym obszarze
Ustawienie fokusu na nagłówku nowej sekcji często zapewnia najlepszy odczyt, dając użytkownikowi jasny tytuł miejsca, do którego właśnie trafił.
Usuwanie elementu
Gdy użytkownik usuwa wiersz, fokus w przeciwnym razie zostaje utracony. Przenieś go na następny element lub pobliską kontrolkę, aby użytkownik mógł kontynuować pracę.
Unikaj skoku fokusu na górę
Przywracanie fokusu na górę strony po każdym działaniu jest dezorientujące. Zamiast tego skieruj go do odpowiedniego miejsca, zachowując kontekst.
Nie przechwytuj fokusu bez powodu
Przenoś fokus wyłącznie w odpowiedzi na działanie użytkownika. Przejmowanie go podczas aktualizacji w tle wyrywa użytkownika z wykonywanej czynności.
Potwierdź, że wszystko działa
Przetestuj działanie, uruchamiając je z klawiatury, i za każdym razem sprawdź, czy obramowanie fokusu pojawia się w zamierzonym miejscu.
Jedno przeniesienie na działanie
Każde istotne działanie powinno powodować dokładnie jedno zaplanowane przeniesienie fokusu. Przewidywalność zawsze wygrywa z pomysłowością.
Szybki test
Chcesz przenieść fokus do świeżo wyświetlonego diva po kliknięciu przycisku. Co musi mieć ten div?
Podsumowanie
Dowiedział się Pan, jak celowo przenosić fokus: umożliwić fokusowanie elementu docelowego za pomocą tabindex="-1", wywołać focus() po wykonaniu działania i wybrać najbardziej użyteczne miejsce. ✨
Często zadawane pytania
Czy lekcja „Przenoszenie fokusu po wykonaniu akcji” jest bezpłatna?
Tak — pełny tekst „Przenoszenie fokusu po wykonaniu akcji” 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 „Przenoszenie fokusu po wykonaniu akcji”?
Przenieś fokus tam, gdzie użytkownik będzie go potrzebować w następnym kroku. Ć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 „Przenoszenie fokusu po wykonaniu akcji”?
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
- tabindex 0, -1 i nigdy dodatni
- Przenoszenie fokusu po wykonaniu akcji
- Przywracanie fokusu po zamknięciu warstwy
- Zarządzanie roving tabindex w widgetach