Tekan Escape untuk Menutup dan Mengembalikan Fokus
Sediakan jalan keluar yang andal dan mengembalikan pengguna.
Tekan Escape untuk Menutup dan Mengembalikan Fokus adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Setiap Modal Membutuhkan Jalan Keluar
Modal yang tidak dapat ditinggalkan adalah jebakan. Pengguna mengharapkan cara yang cepat dan andal untuk menutup modal tanpa harus mencari tombol kecil.
Escape adalah Tombol Universal
Tombol Escape adalah pintasan yang disepakati untuk menutup dialog. Pengguna papan ketik dan pembaca layar biasanya menggunakannya terlebih dahulu, jadi selalu dukung tombol ini.
dialog Bawaan Menangani Escape
dialog bawaan yang dibuka dengan showModal() otomatis tertutup saat Escape ditekan dan memicu peristiwa pembatalan yang dapat Anda dengarkan jika diperlukan.
dialog.addEventListener('cancel', onClose);Hubungkan Escape Sendiri
Untuk modal khusus, dengarkan peristiwa keydown dan tutup saat tombolnya adalah Escape. Hanya membutuhkan beberapa baris, tetapi jangan pernah melewatkannya.
if (e.key === 'Escape') closeModal();Ingat di Mana Fokus Berada
Sebelum membuka modal, simpan elemen yang sedang menerima fokus. document.activeElement adalah pemicu yang nantinya akan Anda gunakan untuk kembali.
const opener = document.activeElement;Pulihkan Fokus saat Ditutup
Saat modal ditutup, kembalikan fokus ke pemicu yang telah disimpan. Langkah memulihkan fokus inilah yang membuat penutupan terasa mulus.
closeModal();
opener.focus();Mengapa Pemulihan Itu Penting
Tanpa pemulihan, fokus berpindah ke bagian atas halaman. Pengguna kehilangan posisinya dan harus menekan Tab berulang kali untuk kembali. Menjengkelkan dan sebenarnya dapat dihindari. 😕
Sediakan Juga Tombol Tutup yang Terlihat
Escape saja tidak cukup. Sediakan tombol tutup dengan label yang jelas agar pengguna tetikus dan layar sentuh juga memiliki jalan keluar yang mudah ditemukan.
<button aria-label="Close dialog">×</button>Mengeklik Latar Belakang
Banyak modal juga tertutup saat Anda mengeklik latar belakang yang diredupkan. Ini tambahan yang baik, tetapi tidak boleh menggantikan Escape atau tombol tutup.
Berhati-Hatilah dengan Tindakan Merusak
Untuk dialog yang mengonfirmasi sesuatu yang berisiko, Anda dapat menonaktifkan penutupan cepat agar Escape yang tidak sengaja tidak melewati pilihan penting.
Uji Seluruh Alur
Buka dengan papan ketik, tekan Escape, lalu pastikan fokus kembali ke pemicu yang persis sama dengan yang Anda gunakan saat memulai. Putaran ini adalah tujuannya. ✅
Pemeriksaan Singkat
Pengguna membuka modal dari sebuah tombol lalu menekan Escape. Di mana fokus harus berada?
Ringkasan: Tutup dengan Baik
Anda telah mempelajari cara mendukung Escape, menyediakan tombol tutup yang terlihat, dan memulihkan fokus ke pemicu agar penutupan tidak pernah membuat pengguna tersesat. 🎯
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 “Tekan Escape untuk Menutup dan Mengembalikan Fokus” gratis?
Ya — teks lengkap “Tekan Escape untuk Menutup dan Mengembalikan Fokus” 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 “Tekan Escape untuk Menutup dan Mengembalikan Fokus”?
Sediakan jalan keluar yang andal dan mengembalikan pengguna. 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 3 dari 4.
Berapa lama pelajaran “Tekan Escape untuk Menutup dan Mengembalikan Fokus” 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