Digital Transformation
HTML Dialog Element (<dialog>)
TL;DR: Elemen
<dialog>adalah modal native HTML yang menyediakan focus trap, tombol Escape, dan ::backdrop tanpa JavaScript pihak ketiga. Cocok untuk konfirmasi, login modal, atau pop-up sederhana di situs bisnis.
Apa itu HTML Dialog Element?
<dialog> adalah elemen HTML yang ditujukan untuk dialog interaktif. Modal dibuka dengan method showModal() dan ditutup dengan close(). Browser otomatis mengelola fokus dan menambahkan pseudo-element ::backdrop untuk lapisan gelap di belakang. Untuk pop-up ringan non-modal pertimbangkan Popover API.
Cara Kerja Singkat
| Aksi | API |
|---|---|
| Buka modal | document.querySelector('dialog').showModal() |
| Tutup | dialog.close('value') |
| Form submit menutup dialog | <form method="dialog"> |
| Backdrop | Style via dialog::backdrop |
Kenapa Penting?
Modal custom sering memicu bug accessibility seperti fokus lolos, screen reader bingung, atau Escape tidak berfungsi. Dari beberapa audit yang saya lakukan di proyek klien personal branding, migrasi modal custom ke <dialog> memangkas baris JavaScript modal sekitar 60-80 persen dan menutup temuan WCAG ringan tanpa perlu library. Dukungan browser evergreen sudah stabil sejak Maret 2022 menurut MDN Dialog Element.
Pertanyaan Umum
Apakah <dialog> aksesibel secara default?
Sebagian besar ya, tapi tetap sediakan aria-labelledby yang menunjuk ke judul dialog dan pastikan urutan fokus di dalam dialog logis.
Bedanya dengan Popover API?
<dialog> cocok untuk konten modal yang menuntut interaksi (form, konfirmasi). Popover API cocok untuk tooltip, menu, atau panel non-modal yang tidak memblokir halaman.
Istilah Terkait