4.1.3 Durum Mesajları

Kullanıcı eylemleriyle ilgili geri bildirim veren durum mesajları; odak değişimi olmadan yardımcı teknolojilere programatik olarak iletilmelidir. Böylece hata, onay veya ilerleme gibi önemli güncellemeler kullanıcıya bildirilir.

SC Kodu: 4.1.3 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#status-messages

Genel Tanım

İşaretleme dilleri kullanılarak oluşturulan içerikte, durum mesajları rol veya özellikler aracılığıyla programatik olarak belirlenebilir; böylece odaklanma gerektirmeden yardımcı teknolojiler tarafından kullanıcıya sunulabilirler.

Faydalar

• Geliştirilmiş Geri Bildirim: Kullanıcıların eylemleri hakkında anında geri bildirim almalarını sağlayarak, sayfada neler olup bittiğini daha iyi anlamalarına yardımcı olur.
• Erişilebilirliğin Artırılması: Dinamik içerik güncellemelerini ekran okuyucu kullanıcıları için erişilebilir hale getirerek, eylemlerinin durumu hakkında merak içinde kalmamalarını sağlar.
• Geliştirilmiş Kullanıcı Deneyimi: Tüm kullanıcıları etkileşimlerinin sonuçları hakkında bilgilendirerek kafa karışıklığını azaltır ve genel kullanıcı deneyimini iyileştirir.

Ana Amaç

WAI-ARIA özelliklerini kullanarak, web sayfalarındaki durum mesajlarının programatik olarak belirlenmesini ve yardımcı teknolojiler tarafından kullanıcılara duyurulmasını sağlayarak, klavye odağını değiştirmeden etkileşimlerinin sonuçları hakkında bilgilendirilmelerini sağlamak.

Bu başarı kriteri, durum mesajlarının görünmesini zorunlu kılmaz, ancak mevcut olmaları durumunda, yardımcı teknolojiler için programatik olarak belirlenebilir olmalarını gerektirir. WAI-ARIA özelliklerini uygulamadan önce, mesajın "durum mesajı" olarak nitelendirilip nitelendirilmediğini doğrulamak çok önemlidir.
Bu tür mesajlar şu konularda bilgi sağlamalıdır:

• Bir eylemin başarısı veya sonuçları ya da bir uygulamanın bekleme durumu.
• Bir sürecin ilerleyişi.
• Hataların varlığı.

Örneğin, kullanıcılara mesaj gönderen canlı bir sohbet kutusunun, görme engelli kullanıcıların uyarıları almasını sağlamak için WAI-ARIA rolüyle işaretlenmesi gerekir. "log" rolünün kullanılması, yardımcı teknolojilerin varsayılan aria-live ve aria-modal özelliklerinden yararlanarak her durum mesajını etkili bir şekilde ayrıştırabilmesini sağlar.

Bir diğer örnek ise kullanıcının bir formu göndermesidir. Eğer yazar programatik olarak belirlenmemiş bir durum mesajı eklerse, yardımcı teknolojilere güvenen kullanıcılar form gönderiminin başarılı olup olmadığını anlayamazlar. Mesaja role="status" eklemek, yardımcı teknolojilerin mesajı ayrıştırmasını ve kullanıcılara işlemin sonucunu bildirmesini sağlar; bu işlemde aria-live özelliği polite ve aria-atomic özelliği true olarak ayarlanmış yerleşik özellikler kullanılarak kapsayıcı altındaki tüm içerik mesaja dahil edilir.

Aynı zamanda, mesaj "bağlam değişikliğine" neden olmamalıdır; örneğin odaklanmayı sağlamamalı, görüntü alanını önemli ölçüde değiştirmemeli veya "mesaj durumu"na atıfta bulunmayan yeni dinamik içerik eklememelidir.

Örnekler arasında, metin yazılırken sonuçları gösteren bir arama kutusu veya kullanıcının bir akordiyon düğmesini etkinleştirmesiyle metni ortaya çıkaran bir arama kutusu yer almaktadır. Kullanıcının odağını bir diyalog içinde değiştiren uyarı diyalogu mesajları da 4.1.3 başarı kriteri kapsamında test edilmemelidir.

Simge gibi metin dışı içerikler de bu başarı kriteri kapsamına girer. Örneğin, bir "meşgul" simgesi uygulamanın meşgul olduğunu gösteriyorsa, simge için alternatif metin sağlayın ve ilgili durum mesajı için gerekli WAI-ARIA özelliklerini veya rollerini kullanın.

En İyi Uygulamalar

• ARIA Rollerini Kullanın: Durum mesajlarının programatik olarak belirlenmesini sağlamak için "rol="status", "rol="log", "rol="alert" gibi roller veya "aria-live" gibi özellikler kullanın.
• Önemli Güncellemeleri Önceliklendirin: Kullanıcıları aşırı duyurularla bunaltmaktan kaçınmak için yalnızca önemli durum mesajları için canlı bölgeleri kullanın.
• Odak Kaymasını Önleyin: Durum mesajlarının odak noktasını değiştirmemesine, ancak yine de gerekli geri bildirimi sağlamasına dikkat edin.
• Yardımcı Teknolojilerle Test Edin: Durum mesajlarının doğru şekilde duyurulduğundan emin olmak için düzenli olarak ekran okuyucularla test edin.

Örnekler ve Açıklamalar

Örnek: Örnek Uygulama

Arama Sonuçları Mesajı Ekleme

Nelerden Kaçınılmalı?

Bir web sayfası, ekran okuyucu kullananlara herhangi bir bildirimde bulunmadan arama sonuçlarını güncelliyor.

HTML/CSS

<p> 5 sonuç bulundu . </p>

Açıklama: Bu uygulama, durum mesajını duyurmak için herhangi bir ARIA özniteliği kullanmadığından, ekran okuyucu kullanıcıları güncellemeden haberdar olmaz.

Ne Yapılmalı?

HTML/CSS

<div role = "status" >5 sonuç döndürüldü. </div>

Açıklama: role="status" kullanılarak, ekran okuyucu güncellemeden haberdar edilir ve kullanıcıya "5 sonuç bulundu" mesajı bildirilir. Bu, ekran okuyucu kullananlar da dahil olmak üzere tüm kullanıcıların arama sonuçlarından haberdar olmasını sağlar.