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.