Zmiany tras bez ponownego ładowania strony
Poinformuj o nawigacji i przenieś fokus po zmianie trasy.
Zmiany tras bez ponownego ładowania strony to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 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.
Problem cichej nawigacji
W aplikacji SPA kliknięcie odnośnika podmienia treść bez pełnego przeładowania. Dla czytnika ekranu nic pozornie się nie dzieje, więc pozostaje cichy wobec nowej strony. 🤫
Dlaczego pełne przeładowania były łatwe
Rzeczywiste załadowanie strony resetuje fokus i powoduje odczytanie nowego tytułu przez czytnik ekranu. Routing po stronie klienta pomija te działania, więc trzeba samodzielnie odtworzyć te sygnały.
Aktualizować tytuł dokumentu
Przy każdej zmianie trasy należy ustawić document.title zgodnie z nowym widokiem. Wiele czytników ekranu odczytuje tytuł po jego zmianie, pomagając użytkownikom zorientować się w miejscu.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Przenosić fokus podczas nawigacji
Po zmianie trasy należy przenieść fokus na początek nowej treści, zwykle na główny nagłówek. Informuje to użytkowników klawiatury i czytników ekranu, że strona się zmieniła.
Ustawić fokus na nagłówku lub elemencie main
Element docelowy powinien mieć tabindex of -1, aby mógł otrzymać fokus za pomocą skryptu, bez dołączania do kolejności przechodzenia klawiszem Tab. Następnie po aktualizacji trasy należy wywołać na nim metodę .focus().
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Ogłaszać zmiany za pomocą live region
Alternatywą jest wizualnie ukryty live region, który wypełnia się tekstem takim jak Navigated to Settings. Czytnik ekranu odczyta ten tekst bez przenoszenia fokusu.
<div aria-live="polite" className="sr-only">{message}</div>Wybrać jedną strategię, nie obie
Przenoszenie fokusu i ogłaszanie komunikatów w live regionie działają. Jednoczesne użycie obu metod może powodować podwójne komunikaty, dlatego należy wybrać jedno podejście dla całej aplikacji i konsekwentnie je stosować.
Liczy się czas
Uruchamiaj przeniesienie fokusu lub ogłoszenie po wyrenderowaniu nowego widoku. W React efekt zależny od ścieżki routingu uruchamia się po zaktualizowaniu DOM-u.
Nie przenoś fokusu w trakcie zadania
Przenoś fokus tylko przy rzeczywistej zmianie trasy, a nie przy drobnych aktualizacjach w miejscu. Odebranie komuś fokusu w trakcie wykonywania czynności jest dezorientujące i nieprzyjemne.
Biblioteki routerów mogą pomóc
Niektóre routery udostępniają hooki reagujące na zmiany trasy. React Router udostępnia useLocation, dzięki czemu efekt może reagować za każdym razem, gdy ścieżka rzeczywiście się zmieni.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Testuj jak użytkownik
Włącz czytnik ekranu, przejdź przez nawigację i słuchaj. Jeśli zmiany trasy są ogłaszane, a fokus trafia w sensowne miejsce, nawigacja SPA jest dostępna.
Szybki test
Użytkownik czytnika ekranu klika link SPA, ale nie słyszy żadnej informacji o zmianie. Jaka jest najbardziej prawdopodobna przyczyna?
Podsumowanie: ogłaszaj trasę
Nawigacja SPA pozostaje niewidoczna, dopóki nie zadbasz o jej ogłaszanie. Zaktualizuj title, a następnie przenieś fokus lub użyj live regionu, aby każdy wiedział, że strona się zmieniła. ✅
Często zadawane pytania
Czy lekcja „Zmiany tras bez ponownego ładowania strony” jest bezpłatna?
Tak — pełny tekst „Zmiany tras bez ponownego ładowania strony” 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 „Zmiany tras bez ponownego ładowania strony”?
Poinformuj o nawigacji i przenieś fokus po zmianie trasy. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Zmiany tras bez ponownego ładowania strony”?
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
- Zmiany tras bez ponownego ładowania strony
- Zarządzanie fokusem za pomocą refs i useEffect
- Fragmenty, portale i pułapka kolejności DOM
- jsx-a11y i zabezpieczenia na poziomie komponentów