Menjebak Fokus di Dalam Modal
Cegah tombol Tab keluar ke halaman di belakangnya.
Menjebak Fokus di Dalam Modal adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Mengapa Fokus Harus Tetap di Dalam
Saat modal terbuka, fokus papan ketik harus tetap berada di dalamnya. Jika Tab keluar ke halaman di belakang, pengguna tunanetra akan tersesat di konten yang tidak dapat mereka lihat.
Elemen Bawaan Membantu
dialog sungguhan yang dibuka dengan showModal() secara otomatis mengunci fokus untuk Anda. Inilah salah satu alasan utama untuk lebih memilihnya daripada div.
Saat Anda Membuatnya Sendiri
Jika Anda membuat modal khusus dengan div, Anda harus mengunci fokus sendiri karena tidak ada yang mencegah Tab keluar ke halaman.
Pindahkan Fokus ke Dalam saat Dibuka
Pertama, kirim fokus ke dalam modal saat modal terbuka, biasanya ke kontrol pertama atau judul, agar pengguna memulai dari tempat yang tepat.
modal.querySelector('button').focus();Temukan Elemen yang Dapat Menerima Fokus
Kumpulkan item modal yang dapat menerima fokus: tautan, tombol, masukan, dan apa pun yang memiliki tabindex. Anda membutuhkan item pertama dan terakhir untuk membuat putaran.
modal.querySelectorAll('a, button, input, [tabindex]');Putar dari Terakhir ke Pertama
Saat Tab ditekan pada elemen terakhir, kembalikan fokus ke elemen pertama. Dengan begitu pengguna tetap berputar di dalam modal, bukan keluar darinya.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Putar dari Pertama ke Terakhir
Tangani juga Shift+Tab pada elemen pertama: kirim fokus ke elemen terakhir agar perpindahan mundur dengan Tab juga tetap terkunci.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Cegah Perilaku Bawaan Tab
Di batas-batas tersebut, Anda harus memanggil preventDefault(); jika tidak, peramban akan memindahkan fokus keluar sebelum kode Anda dapat mengarahkannya kembali.
e.preventDefault();Perhatikan Item yang Dinonaktifkan dan Tersembunyi
Lewati elemen yang dinonaktifkan atau tersembunyi saat memilih elemen pertama dan terakhir karena elemen tersebut sebenarnya tidak dapat menerima fokus.
Jangan Lupakan Latar Belakang
Mengunci fokus harus disertai dengan membuat halaman di belakang tidak aktif, sehingga bahkan klik yang tidak sengaja atau pembaca layar tidak dapat menjangkaunya saat modal terbuka.
Uji dengan Papan Ketik
Tekan Tab melalui seluruh modal dan amati cincin fokus berputar tanpa pernah keluar. Putaran tersebut membuktikan bahwa penguncian berfungsi. ✅
Pemeriksaan Singkat
Anda membuat modal div khusus. Apa yang harus Anda lakukan agar Tab tetap berada di dalamnya?
Ringkasan: Pertahankan Fokus di Dalam
Anda telah mempelajari cara memindahkan fokus ke dalam saat modal dibuka dan memutarnya di kedua batas, sehingga pengguna papan ketik tetap berada di dalam modal sampai memilih untuk menutupnya. 🎯
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 “Menjebak Fokus di Dalam Modal” gratis?
Ya — teks lengkap “Menjebak Fokus di Dalam Modal” 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 “Menjebak Fokus di Dalam Modal”?
Cegah tombol Tab keluar ke halaman di belakangnya. 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 2 dari 4.
Berapa lama pelajaran “Menjebak Fokus di Dalam Modal” 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
- Peran Dialog dan Elemen dialog Bawaan
- Menjebak Fokus di Dalam Modal
- Tekan Escape untuk Menutup dan Mengembalikan Fokus
- Latar Belakang Inert dan aria-modal