Meydan okuma - Erişilebilir dialog

<dialog> ve ARIA ile tam erişilebilir bir modal yazarsın.

Diyalogu erişilebilir yap

Bir <dialog> penceresini erişilebilir kılmak için üç ilişki kurulur. aria-modal="true" ekran okuyucuya arka planın etkileşim dışı olduğunu bildirir. aria-labelledby pencerenin başlığını, aria-describedby açıklamasını işaret eder; her ikisi de bir id'ye bağlanır.

Odağı pencereye almak için bir düğme ya da tabindex değeri içeren öğe bulunmalı. Kapanış düğmesi metin içermeli; klavye kullanıcıları pencereyi kapatabilmeli. Bu dört ilişki bir arada modal desenini tamamlar.

Uygulama Erişilebilir modal diyalog yaz

Bir <dialog> öğesi yaz. aria-modal="true" ekle. Başlığı aria-labelledby, açıklamayı aria-describedby ile işaretle; her iki değer de ilgili id'lere bağlanmalı. Diyalogun içine bir <h2> başlığı, bir <p> açıklaması ve içeriği olan bir <button> kapat düğmesi koy.

Örnek çözümü göster

Diyalogu aria-modal, başlık ve açıklama ilişkileriyle kur.

Örnek çözüm:
<dialog aria-modal="true" aria-labelledby="settings-title" aria-describedby="settings-desc">
  <h2 id="settings-title">Ayarlar</h2>
  <p id="settings-desc">Bu pencere ayarlarınızı düzenler.</p>
  <button>Kapat</button>
</dialog>

Kendini test et

Hangi öznitelik diyalogu modal yapar?
- role="modal"
- aria-haspopup="dialog"
- aria-modal="true"
- data-modal="yes"
Cevabı göster

aria-modal="true" — Doğru. aria-modal="true" arka planın etkileşim dışı olduğunu bildirir.

Başlık ilişkisini kur

<dialog aria-modal="true" aria-labelledby="____"><h2 id="dialog-title">Ayarlar</h2></dialog>

Cevabı göster

<dialog aria-modal="true" aria-labelledby="dialog-title"><h2 id="dialog-title">Ayarlar</h2></dialog>

Modal açıldığında ilk olarak ne yapılmalı?
- Odağı diyalogun ilk odaklanabilir öğesine taşımak
- Sayfayı yeniden yükle
- Tüm arka plan öğelerini gizlemek
- Diyalogu hemen kapatmak
Cevabı göster

Odağı diyalogun ilk odaklanabilir öğesine taşımak — Doğru. Odak pencere içine taşınmalı; klavye kullanıcıları içeride gezinebilmeli.

Sıradaki ders: Meydan okuma - ARIA tabpanel

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler