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.

Sıradaki ders: Heading outline

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler