Sayfayı Yenilemeden Rota Değiştirme
Rota değişiminde gezinmeyi bildirin ve odağı taşıyın.
Sayfayı Yenilemeden Rota Değiştirme, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Sessiz Gezinme Sorunu
Bir SPA'de bağlantıya tıklamak, tam yeniden yükleme olmadan içeriği değiştirir. Ekran okuyucusuna hiçbir şey olmuş gibi görünmez; bu nedenle yeni sayfa hakkında sessiz kalır. 🤫
Tam Yeniden Yüklemeler Neden Kolaydı
Gerçek bir sayfa yüklemesi odağı sıfırlar ve ekran okuyucusunun yeni başlığı okumasını sağlar. İstemci taraflı yönlendirme bunların tümünü atladığı için bu ipuçlarını kendiniz yeniden oluşturmalısınız.
Belge Başlığını Güncelleyin
Her rota değişikliğinde document.title değerini yeni görünüme uyacak şekilde ayarlayın. Birçok ekran okuyucusu başlık değiştiğinde onu okur ve kullanıcının yönünü bulmasını sağlar.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Gezinmede Odağı Taşıyın
Yönlendirmeden sonra odağı yeni içeriğin en üstüne, genellikle ana başlığa taşıyın. Bu, klavye ve ekran okuyucusu kullanıcılarına sayfanın değiştiğini bildirir.
Başlığa veya Ana İçeriğe Odaklanın
Hedefe, Sekme sırasına katılmadan betik aracılığıyla odak alabilmesi için tabindex değeri -1 verin. Ardından rota güncellendikten sonra üzerinde .focus() çağrısı yapın.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Canlı Bölgeyle Bildirin
Alternatif olarak, Navigated to Settings gibi bir metinle doldurduğunuz görsel olarak gizli bir canlı bölge kullanabilirsiniz. Ekran okuyucusu, odağı taşımadan bu metni seslendirir.
<div aria-live="polite" className="sr-only">{message}</div>İkisinin Değil, Bir Stratejinin Seçimini Yapın
Odağı taşımak ve bir canlı bölgede duyuru yapmak, ayrı ayrı işe yarar. İkisini aynı anda yapmak çift duyuruya neden olabilir; bu nedenle uygulama başına bir yaklaşım seçin ve tutarlı olun.
Zamanlama Önemlidir
Odaklamayı veya duyuruyu yeni görünüm oluşturulduktan sonra çalıştırın. React'te rota yoluna bağlı bir etki, DOM güncellendikten sonra çalışır.
Görev Ortasında Odağı Çekmeyin
Odağı yalnızca gerçekten rota değiştiğinde taşıyın; yerinde gerçekleşen küçük güncellemelerde taşımayın. Birisi bir işlemin ortasındayken odağı almak rahatsız edici ve kafa karıştırıcıdır.
Yönlendirici Kütüphaneleri Yardımcı Olabilir
Bazı yönlendiriciler rota değişiklikleri için kancalar sunar. React Router size useLocation sağlar; böylece bir etki, yol gerçekten her değiştiğinde tepki verebilir.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Bir Kullanıcı Gibi Test Edin
Bir ekran okuyucuyu açın, gezinme menünüzde tıklayarak ilerleyin ve dinleyin. Rota değişiklikleri duyuruluyor ve odak mantıklı bir yere yerleşiyorsa SPA gezinmeniz erişilebilirdir.
Hızlı Kontrol
Bir ekran okuyucu kullanıcısı SPA bağlantısına tıklıyor ancak hiçbir değişiklik duymuyor. En olası neden nedir?
Özet: Rotayı Duyurun
SPA gezinmesi, duyulur hâle getirene kadar görünmezdir. Başlığı güncelleyin, ardından odağı taşıyın veya herkesin sayfanın değiştiğini bilmesi için canlı bir bölge kullanın. ✅
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Sayfayı Yenilemeden Rota Değiştirme” dersi ücretsiz mi?
Evet — “Sayfayı Yenilemeden Rota Değiştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Sayfayı Yenilemeden Rota Değiştirme” dersinde ne öğreneceğim?
Rota değişiminde gezinmeyi bildirin ve odağı taşıyın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Sayfayı Yenilemeden Rota Değiştirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Sayfayı Yenilemeden Rota Değiştirme
- Ref ve useEffect ile Odağı Yönetme
- Parçalar, Portallar ve DOM Sırası Tuzağı
- jsx-a11y ve Bileşen Düzeyinde Güvenceler