Dialog ve modal
<dialog> etiketi ve ARIA diyaloğu desenini öğrenirsin.
<dialog> etiketi
HTML artık yerleşik <dialog> etiketi sunar. Bu etiket bir modal penceresi için gereken tüm altyapıyı sağlar: üstte katman, odak tuzağı ve ESC ile kapatma. Açmak için JavaScript ile .show() ya da .showModal() çağrılır.
.show() modal değil, normal bir katman açar. .showModal() ise gerçek modalı açar: arka planı karartır, ESC ile kapatılır ve Tab öğeleri modal içinde tutar. Kapamak için .close() kullanılır.
Modalda odak tuzağı
Modal açıkken klavye odağı modal içinde kalmalıdır; buna focus trap (odak tuzağı) denir. Tab döngüsü modalın son öğesinden ilk öğesine atlamalı, dışarı çıkmamalıdır.
Yerleşik <dialog> + .showModal() bunu otomatik yapar. Ayrıca modal açıldığında odak ilk öğeye, kapanınca tetikleyen öğeye döner. ESC tuşu modalı kapatır. Kendi modalını yazıyorsan bunları elle eklemen gerekir.
Uygulama Erişilebilir dialog ve açıcı buton yaz
Body içine bir <dialog> ekle. dialog'a aria-modal="true" ve aria-labelledby="dlg-title" ver. İçine bir <h2 id="dlg-title"> ile başlık yaz (örnek: 'Ayarları sil'). Sonra bir <form method="dialog"> ekle; içine bir <button> koy ve metni 'Vazgeç' olsun. dialog'dan sonra bir <button id="opener"> koy ve metni 'Aç' olsun.
Örnek çözümü göster
<body>
<dialog aria-modal="true" aria-labelledby="dlg-title">
<h2 id="dlg-title">Ayarları sil</h2>
<form method="dialog">
<button>Vazgeç</button>
</form>
</dialog>
<button id="opener">Aç</button>
</body>Kendini test et
-
Hangisi gerçek bir modal (arka plan karartır, ESC ile kapanır) açar?
- .open()
- .display()
- .show()
- .showModal()
Cevabı göster
.showModal() — Doğru. showModal() arka planı karartır, ESC ile kapatır ve Tab'ı modal içinde tutar.
-
Modal özniteliğini yaz
<dialog ____="true" aria-labelledby="dlg-title"> <h2 id="dlg-title">Onay</h2> </dialog>Cevabı göster
<dialog aria-modal="true" aria-labelledby="dlg-title"> <h2 id="dlg-title">Onay</h2> </dialog> -
Yöntemi amacıyla eşleştir
- showModal()
- Modal açar, odak tuzağı kurar
- show()
- Modal değil, katman açar
- close()
- Diyalogu kapatır
- aria-modal
- Modal olduğunu bildirir
-
showModal() ile açılan dialog'da ESC tuşu ne yapar?
- Kapatır (.close() gibi)
- Sayfayı yeniler
- Önceki öğeye gider
- Formu gönderir
Cevabı göster
Kapatır (.close() gibi) — Doğru. ESC, showModal ile açılan diyaloğu .close() gibi kapatır.