Live regions
aria-live ve aria-atomic ile dinamik içerik duyurusu yaparsın.
aria-live ile canlı bölge
Bir sayfada dinamik içerik güncellendiğinde, ekran okuyucu bunu otomatik duyurmalıdır. Bunu aria-live özniteliği sağlar. Üç değer alır: polite (kibar), assertive (acil) ve off (kapalı).
polite ekran okuyucu boşsa duyurur; kullanıcıyı bölmez. assertive anında duyurur ve akışı keser; acil hatalar için uygundur. Bilgilendirici durumlar için polite tercih edilir. Bir bölgeyi canlı yapmak için aria-live veya role="status" / role="alert" kullanılır.
aria-atomic ve yerleşik roller
aria-atomic özniteliği canlı bölgenin tamamının mı yoksa yalnızca değişen kısmının mı okunacağını belirler. aria-atomic="true" tüm bölgeyi tek birim gibi okur; aria-atomic="false" yalnızca değişen düğümü okur.
Bazı roller zaten canlı bölge taşır: status kibarca, alert acil olarak duyurur. Bu durumda aria-live yazmaya gerek yoktur. Örneğin <p role="alert"> bir hata mesajını anında okutur.
Uygulama Form ve canlı durum bölgesi yaz
Body içine bir <form> ekle. form içine bir <label> ve <input> koy; label'ın for'u input'un id'sine bağlansın. form'un altına, dışına bir <div> ekle; bu div role="status", aria-live="polite" ve aria-atomic="true" özniteliklerini taşısın. İçinde dolu bir paragraf olsun, örneğin 'Form kaydedildi' yazsın.
Örnek çözümü göster
<body>
<form action="/kaydet" method="post">
<label for="ad">Ad</label>
<input id="ad" type="text" name="ad" required>
</form>
<div role="status" aria-live="polite" aria-atomic="true">
<p>Form kaydedildi</p>
</div>
</body>Kendini test et
-
Bir hata mesajı anında duyurulmalı; hangi aria-live?
- off
- polite
- assertive
- static
Cevabı göster
assertive — Doğru. assertive ekran okuyucuyu hemen keser ve hatayı anında okur; acil mesajlar için ideal.
-
Canlı bölgenin özniteliğini yaz
<div role="status" aria-live="polite" ____="true">Sepete 2 ürün eklendi.</div>Cevabı göster
<div role="status" aria-live="polite" aria-atomic="true">Sepete 2 ürün eklendi.</div> -
Değeri davranışıyla eşleştir
- polite
- Kibarca, boş olunca
- assertive
- Acil, anında
- off
- Duyurulmaz
- role="status"
- Polite taşır
-
aria-atomic="true" ne yapar?
- Bölgeyi gizler
- Bölgenin tamamını tek birim olarak okur
- Bölgeyi yeniden yükler
- Bölgeyi boşaltır
Cevabı göster
Bölgenin tamamını tek birim olarak okur — Doğru. aria-atomic="true" tüm bölgeyi tek birim gibi okur; kısmi güncellemelerde karışıklığı önler.