Tek sayfalı uygulamalar, görünüm değişikliklerinin iletilmesi söz konusu olduğunda önemli bir erişilebilirlik sorunu teşkil eder. Bir sayfa yenilemesi olmadan, ekran okuyucular bu önemli UI değişikliklerini algılamaz ve görme engelli kullanıcıların kafasını karıştırır ve farkında olmaz.
Çözümlerden biri, sayfa başlığına göre bir mesaj oluşturmak ve yeni bir görünümün yüklendiğini yararlı bir mesajla açıkça duyurmak için bir ARIA canlı bölgesinden yararlanmaktır. Önce, viewContent güncellendiğinde çağrılan bir işlev oluşturun. AngularJS, bu amaç için bir $ viewContentLoaded olayı sağlar. Denetleyici kodunda, olayı dinleyin ve bir işlev çağırın (CoffeeScript'te):
app.controller ’PageController’, ($ kapsam, $ location, $ http) -> $ kapsam. $ on ’$ viewContentLoaded’, announce_view_loaded
Announce_view_loaded işlevinde sayfa başlığını güncelleyin ve mesajı duyurun. Tek sayfalı çerçeveler sayfa başlıklarını otomatik olarak güncellemese de, sayfa başlığını mevcut görünümle senkronize tutmak, kullanıcıların görünümü anlamasını geliştirir.
Bunu yapmanın bir yolu, görünüm başlığını saklamak için görünümün herhangi bir yerinde bir veri özniteliği kullanmaktır:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Şimdi güncellenmiş sayfa başlığını kullanarak bir mesaj oluşturun ve duyurun:
$ .announce (document.title + ’, görünüm yüklendi’)
$ .announce (), içeriği duyurmak için görünür olmayan tek bir canlı bölge kullanan bir jQuery işlevidir. Bu yaklaşım, canlı bölgelerin anlık kullanımına kıyasla kodu ve hata ayıklama çabalarını basitleştirmeye yardımcı olur. Ancak unutulmaması gereken birkaç en iyi uygulama vardır.
Öncelikle, aria-live = "polite | assertive" kullanarak içeriği duyurmak için sayfanızda tek bir "spiker" canlı bölgesi oluşturun. Canlı bölge rolleri dahil olmak üzere diğer canlı bölgeleri kullanmayın (ör. Role = "alert | timer | log"). Örnek bir canlı bölge:
div aria-live = "polite" id = "spiker"> (Burada eklenen veya güncellenen metin duyurulacaktır) / div>
İkinci olarak, içeriği güncelledikten kısa bir süre sonra canlı bölgenin içeriğini temizleyin. Bu, kullanıcıların eski mesajlara takılıp kalmasını engeller.
Son olarak, herhangi bir erişilebilirlik tekniğinde olduğu gibi, $ .announce () 'ı mantıklı bir şekilde kullanın. Yalnızca önemli UI güncellemelerini iletmek için kullanılmalıdır.
Kelimeler: Patrick Fox
Patrick Fox, Austin’deki Razorfish’te Web UI teknoloji direktörüdür. Bu makale ilk olarak net dergisinin 271. sayısında yayınlandı.
Bunu beğendin mi? Bunları oku!
- Tasarımcının dijital erişilebilirlik kılavuzu
- En iyi ücretsiz komut dosyası yazı tipleri
- Ücretsiz grafiti yazı tipi seçimi
