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.

Sıradaki ders: Dialog ve modal

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler