Durum mesajı duyuruları ve ADA

Odaksız gelen mesajlar

Bir sayfa durum mesajı gösterdiğinde, bu mesaj bir rol ya da özellik aracılığıyla programatik olarak belirlenebilir olmalıdır; böylece yardımcı teknoloji, kullanıcı odağı ona taşımadan onu sunabilir. Burada durum mesajı, bağlam değişikliği olmayan ve kullanıcıya bir eylemin sonucunu, bir bekleme durumunu, bir sürecin ilerleyişini ya da bir hatayı bildiren içerik değişikliği demektir.

Gören bir ziyaretçi köşede "Taslak kaydedildi" yazısının belirdiğini görür. Ekran okuyucu kullanıcısı hiçbir şey duymaz; çünkü odak hâlâ Kaydet düğmesindedir ve yazılıma yeni metni okumasını söyleyen hiçbir şey yoktur. Ölçüt bu boşluğu kapatır.

Odak mesaja taşındığında, örneğin bir formun üstündeki hata özetine, uygulanmaz; çünkü ekran okuyucu odak alan her şeyi duyurur.

Kimsenin duymadığı onaylar

Kamu hizmeti işlemleri sessiz sonuçlarla doludur: bir dosyalama makbuzu, bir ödeme onayı, "başvuru kaydedildi" notu, çevrimiçi kuyruktaki yer. Bunlar yalnızca görselse, ekran okuyucu kullanan vatandaş formun gidip gitmediğini anlayamaz ve onu iki kez gönderebilir ya da bırakabilir.

Otomatik kaydeden uzun formlara ve zamanlayıcıyla güncellenen her şeye özellikle dikkat edin.

Bir mesajın görünür olması yeterli değildir; duyulabilir de olması gerekir. Çözüm çoğu zaman tek bir özniteliktir; asıl iş, hangi mesajların bu yola ihtiyaç duyduğunu bulmaktır.

Canlı bölge önce var olmalı

Çoğu ekran okuyucu sayfada zaten bulunan bir bölgeyi izler ve ona yapılan değişiklikleri duyurur. Metniyle birlikte sonradan eklenen bir bölge çoğu zaman kaçırılır. İşaretlemeye boş bir durum kapsayıcısı koyun ve sonra doldurun. Davranış ekran okuyucuya ve tarayıcıya göre biraz değişebilir; bu yüzden gerçek yardımcı teknolojilerle test etmek önemlidir.

dosyalamaSonucu.innerHTML =
  '<div role="status">Dosyalama alındı. Dosya numarası 24-0817.</div>';

<!-- sayfada baştan var -->
<div id="dosyalama-durumu" role="status"></div>

<script>
  document.getElementById("dosyalama-durumu").textContent =
    "Dosyalama alındı. Dosya numarası 24-0817.";
</script>

Gürültüsüz kuyruk güncellemeleri

Her sayı değişikliğini agresif biçimde duyuran bir çevrimiçi bekleme odası sayfayı kullanılmaz kılar. Kibar bir durum bölgesi kullanın ve onu anlamlı noktalarda güncelleyin.

<div aria-live="assertive" id="sira"></div>
<script>
  setInterval(() => sira.textContent = "Sıra " + n(), 1000);
</script>

<div role="status" id="sira"></div>
<script>
  let onceki = null;
  setInterval(() => {
    const simdi = n();
    if (onceki === null || simdi % 10 === 0 || simdi <= 3) {
      sira.textContent = "Sırada " + simdi + ". kişisiniz.";
    }
    onceki = simdi;
  }, 1000);
</script>

Uzun başvurularda otomatik kayıt notları

Köşede sessizce güncellenen bir kaydedildi notu bir durum mesajı olmalıdır, ama her birkaç saniyede yazmayı kesen biri değil. Kayıt tamamlandığında güncelleyin ve metni kısa tutun.

<span class="kayit">Kaydedildi 14.14</span>

<span id="kayit-notu" role="status"></span>
<!-- betik her başarılı kayıttan sonra şunu yazar: "Taslak 14.14'te kaydedildi." -->

Yerel uygulamalarda duyurular

Bu ölçüt işaretleme dilleriyle uygulanan içerik için geçerlidir; yerel uygulamalarda platform duyuruları karşılığıdır. Yerel platformlar duyuru çağrıları ve canlı bölgeler sağlar. İki saniye sonra kaybolan bir banner, sessiz mesajın klasik örneğidir.

// SwiftUI
Button("Ayırt") {
    ayirtmalar.append(kitap)
    bannerGoster = true   // yalnızca görsel
}

// SwiftUI
Button("Ayırt") {
    ayirtmalar.append(kitap)
    bannerGoster = true
    UIAccessibility.post(notification: .announcement,
                         argument: "\(kitap.baslik) için ayırtma yapıldı")
}

// Jetpack Compose
if (banner) Text("Ayırtma yapıldı")

// Jetpack Compose
if (banner) {
    Text("Ayırtma yapıldı",
         modifier = Modifier.semantics {
             liveRegion = LiveRegionMode.Polite
         })
}

Nasıl test edilir

1. Geri bildirim üreten her eylemi tetikleyin: gönder, kaydet, ekle, filtrele, yükle, bekle. Bunu ekran okuyucu açıkken ve odak olduğu yerde kalarak yapın.
2. Dinleyin: mesaj belirdikten kısa süre sonra, siz ona gitmeden, bir kez okunmalıdır.
3. DOM'u inceleyin ve canlı bölgenin ya da rolün metin eklenmeden önce var olduğunu doğrulayın.
4. Aciliyeti kontrol edin. Hatalar kesebilir; onaylar ve ilerleme kibar olmalıdır.
5. Hiçbir şeyin tekrar tekrar ya da hızlı bir zamanlayıcıyla konuşmadığından emin olun.

Sık yapılan hatalar ve yayın öncesi liste

• Bölgeyi ve metnini aynı adımda eklemek.
• Rutin onaylar için role="alert" kullanmak.
• Odağı bir toast'a taşıyıp kullanıcıyı orada tutmak.
• Canlı bölgeyi saniyede birkaç kez güncellemek.
• Mesajı okunamadan önce, bir saniye sonra DOM'dan kaldırmak.

Yayına almadan önce:

• Her sonuç mesajı bir rol ya da canlı bölgeyle açığa çıkarılıyor.
• Bölgeler yüklemede var ve sonradan güncelleniyor.
• Acil hatalar alert, diğer her şey kibar durum kullanıyor.
• Mesajlar okunacak kadar kalıyor ve tekrarlanmıyor.

Genel olarak form davranışı yaygın engeller sayfasında ele alınır.

Kaynaklar

• Understanding SC 4.1.3: Status Messages (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.