Perubahan Rute Tanpa Memuat Ulang Halaman
Umumkan navigasi dan pindahkan fokus saat rute berubah.
Perubahan Rute Tanpa Memuat Ulang Halaman adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Masalah Navigasi yang Senyap
Dalam SPA, mengeklik tautan mengganti konten tanpa memuat ulang secara penuh. Bagi pembaca layar, seolah-olah tidak terjadi apa pun, sehingga pembaca layar tetap senyap tentang halaman baru tersebut. 🤫
Mengapa Pemuatan Ulang Penuh Dahulu Mudah
Pemuatan halaman yang sebenarnya mengatur ulang focus dan membuat pembaca layar membacakan judul baru. Perutean sisi klien melewati semua proses itu, jadi Anda harus membuat ulang petunjuk tersebut sendiri.
Perbarui Judul Dokumen
Pada setiap perubahan rute, atur document.title agar sesuai dengan tampilan baru. Banyak pembaca layar membacakan judul saat judul berubah, sehingga pengguna mengetahui posisinya.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Pindahkan focus Saat Bernavigasi
Setelah perutean, arahkan focus ke bagian teratas konten baru, biasanya judul utama. Ini memberi tahu pengguna papan ketik dan pembaca layar bahwa halaman telah berubah.
Arahkan focus ke Judul atau Konten Utama
Berikan target tersebut tabindex -1 agar dapat menerima focus melalui skrip tanpa masuk ke urutan tab. Kemudian panggil .focus() pada target tersebut setelah rute diperbarui.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Umumkan dengan Wilayah Live
Alternatifnya adalah live region yang disembunyikan secara visual dan diisi dengan teks seperti Navigated to Settings. Pembaca layar akan membacakannya tanpa memindahkan focus.
<div aria-live="polite" className="sr-only">{message}</div>Pilih Satu Strategi, Bukan Keduanya
Memindahkan focus dan mengumumkan melalui live region sama-sama dapat berfungsi. Melakukan keduanya sekaligus dapat menyebabkan pengumuman ganda, jadi pilih satu pendekatan untuk setiap aplikasi dan gunakan secara konsisten.
Waktu Itu Penting
Jalankan focus atau pengumuman setelah tampilan baru dirender. Dalam React, efek yang bergantung pada jalur rute dijalankan setelah DOM diperbarui.
Jangan Merebut focus di Tengah Tugas
Pindahkan focus hanya saat rute benar-benar berubah, bukan saat terjadi pembaruan kecil di tempat. Merebut focus ketika seseorang sedang melakukan tindakan terasa mengganggu dan membingungkan.
Pustaka Perutean Dapat Membantu
Beberapa perute menyediakan kait untuk perubahan rute. React Router menyediakan useLocation, sehingga efek dapat merespons setiap kali jalur benar-benar berubah.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Uji Seperti Pengguna
Nyalakan pembaca layar, klik berbagai bagian navigasi Anda, lalu dengarkan. Jika perubahan rute diumumkan dan focus berpindah ke tempat yang sesuai, navigasi SPA Anda sudah aksesibel.
Pemeriksaan Singkat
Pengguna pembaca layar mengeklik tautan SPA tetapi tidak mendengar perubahan apa pun. Apa penyebab yang paling mungkin?
Rangkuman: Umumkan Rutenya
Navigasi SPA tidak terlihat sampai Anda membuatnya terdengar. Perbarui judul, lalu pindahkan focus atau gunakan live region agar semua orang mengetahui bahwa halaman telah berubah. ✅
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Perubahan Rute Tanpa Memuat Ulang Halaman” gratis?
Ya — teks lengkap “Perubahan Rute Tanpa Memuat Ulang Halaman” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Perubahan Rute Tanpa Memuat Ulang Halaman”?
Umumkan navigasi dan pindahkan fokus saat rute berubah. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Perubahan Rute Tanpa Memuat Ulang Halaman” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Perubahan Rute Tanpa Memuat Ulang Halaman
- Mengelola Fokus dengan Ref dan useEffect
- Fragmen, Portal, dan Perangkap Urutan DOM
- jsx-a11y dan Pengaman Tingkat Komponen