Saat dialog modal terbuka, pengguna mengharapkan penggunaan kontrol yang sudah dikenal untuk menutupnya: menekan tombol Esc di keyboard, menggunakan tombol kembali atau gestur di platform seluler, atau gestur tutup dengan teknologi pendukung.
Saat elemen <dialog> pertama kali diperkenalkan, elemen ini dapat ditutup dengan tombol Esc, tetapi tidak dengan kontrol platform lain seperti tombol kembali/gestur di perangkat seluler. Dengan penambahan atribut closedby untuk elemen <dialog>, perilaku yang diperluas untuk merespons lebih banyak kontrol khusus platform untuk permintaan penutupan telah diterapkan untuk elemen <dialog> yang dibuka dalam status modal (yaitu, saat dibuka secara imperatif dengan metode showModal() elemen <dialog> di JavaScript atau secara deklaratif dengan perintah pemanggil show-modal). Jadi, tidak ada perubahan khusus yang perlu dilakukan developer jika mereka sudah menggunakan elemen <dialog>.
<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Saat dibuka dalam status modal, dialog tanpa atribut closedby merespons permintaan penutupan sama seperti menetapkan atribut closedby ke closerequest secara eksplisit.
<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Jika Anda juga menginginkan perilaku “tutup ringan”, Anda harus menetapkan closedby ke any:
<dialog closedby="any" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>
Strategi penggantian
Elemen <dialog> yang dibuka dalam status modal sudah dapat ditutup dengan Esc, sehingga tidak diperlukan penggantian. Tidak ada cara yang baik untuk menerapkan permintaan tutup dari tombol kembali/gestur di perangkat seluler, jadi lebih mudah untuk menggunakan fitur ini sebagai progressive enhancement, terutama karena ada cara inklusif lain untuk menutup dialog modal. Demikian pula, perilaku tutup ringan untuk elemen <dialog> yang menggunakan closedby="any" dapat dianggap sebagai progressive enhancement.