Peran Dialog dan Elemen dialog Bawaan
Tandai lapisan sebagai dialog modal yang sebenarnya.
Peran Dialog dan Elemen dialog Bawaan 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.
Apa yang Membuat Dialog Menjadi Dialog
Dialog adalah lapisan yang menyela halaman untuk meminta masukan atau menampilkan pesan. Pengguna pembaca layar perlu diberi tahu bahwa ini adalah dialog, bukan sekadar teks yang melayang.
div Terlihat seperti Modal, tetapi Bukan Modal
div yang diberi gaya dapat terlihat seperti jendela pop-up, tetapi teknologi asistif melihatnya sebagai konten biasa. Tanpa peran yang tepat, pengguna tidak akan tahu bahwa dialog telah terbuka.
<div class="modal">Are you sure?</div>Kenali Elemen dialog Bawaan
Elemen dialog HTML dibuat untuk tugas ini. Elemen tersebut sudah membawa semantik dialog, sehingga pembaca layar mengumumkannya dengan benar.
<dialog>Are you sure?</dialog>Buka sebagai Modal Sungguhan
Panggil showModal() dalam JavaScript untuk membuka dialog sebagai modal sungguhan. Inilah yang membuat halaman di belakangnya tidak aktif dan tidak dapat dijangkau.
document.querySelector("dialog").showModal();show() Bukan Modal
Perhatikan: show() membuka dialog sebagai nonmodal, sehingga halaman tetap interaktif di belakangnya. Untuk dialog yang memblokir halaman, gunakan showModal().
dialog.show();Peran di Balik dialog
Di balik layar, elemen ini dipetakan ke peran dialog. Jika Anda harus membuatnya dari div, role="dialog" adalah atribut yang memberinya makna.
<div role="dialog">Settings</div>alertdialog untuk Pilihan Mendesak
Saat dialog menuntut respons, seperti konfirmasi penghapusan, gunakan role="alertdialog". Ini memberi sinyal urgensi tambahan kepada teknologi asistif.
<div role="alertdialog">Delete this file?</div>Setiap Dialog Membutuhkan Nama
Dialog harus memiliki nama yang aksesibel agar pengguna mengetahui tujuannya saat dialog dibuka. Arahkan aria-labelledby ke judul di dalamnya.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Tutup melalui Kode
Elemen bawaan ini menyediakan metode close() yang sesuai. Pemanggilannya menutup dialog dan membuat halaman di belakangnya dapat dijangkau lagi.
dialog.close();Latar Belakang Bawaan
Dialog modal mendapatkan latar belakang secara otomatis yang dapat Anda atur gayanya dengan pseudo-elemen ::backdrop. Latar ini meredupkan halaman dan menandakan bahwa fokus telah berpindah.
dialog::backdrop { background: rgba(0,0,0,0.5); }Mengapa Elemen Bawaan Menghemat Pekerjaan
dialog bawaan menangani fokus, Escape, dan penonaktifan latar belakang untuk Anda. Menggunakannya berarti lebih sedikit kesalahan dibandingkan membuat div sendiri.
Pemeriksaan Singkat
Anda ingin membuat pop-up konfirmasi yang memblokir halaman sampai pengguna merespons. Pemanggilan mana yang harus Anda gunakan?
Ringkasan: Gunakan Dialog Sungguhan
Anda telah mempelajari bahwa modal membutuhkan semantik dialog. Utamakan dialog bawaan dengan showModal(), beri nama, dan gunakan alertdialog hanya untuk pilihan yang mendesak.
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 “Peran Dialog dan Elemen dialog Bawaan” gratis?
Ya — teks lengkap “Peran Dialog dan Elemen dialog Bawaan” 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 “Peran Dialog dan Elemen dialog Bawaan”?
Tandai lapisan sebagai dialog modal yang sebenarnya. 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 “Peran Dialog dan Elemen dialog Bawaan” 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