Tek sayfa uygulamalarında erişilebilirlik (ARIA vb.)

Question

SPA (AngularJS) Erişilebilir (ekran okuyucular için) yapmak için en iyi yaklaşım nedir?

Ariasyon belirtiminde çok az deneyimim yok ve tek bir sayfa uygulamasında çalışıp çalışmayacağını merak ediyorum.

Gelişirken yaygın tuzaklar nelerdir?

Gelişme sırasında bir hata ayıklama ve erişilebilirlik nasıl test edilir?

Answer 1

Bu, buradaki sorunların geniş bir alanını kapsayabilir. Öyleyse, bazı temelleri, yolunuza başladığına dair umutları, yaygın tuzakları, olduğu gibi gideceğim.

İlk olarak, yorum yapanların dediği gibi, evet, ARIA etiketlerinin doğru şekilde kullanıldığından emin olmanız gerekir. Diyelim ki, eğer bir div'u bir düğme olarak göstermek istiyorsanız, bunun gibi bir şeyiniz olur.

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div> 

bir ekran okuyucu tarafından seçilen Bu buton "süper gösterişli düğmesi" adı verilecek, böylece arya-etiket özelliğinde düğme koymak gerekmez. Orada daha karmaşık örnekler var, ama bu, onun temellerini, oldukça gösteriyor. Rol, aria-label ve tabindex, gördüğünüz en yaygın ARIA öznitelikleri olacaktır.

Ekran okuyucusunun kullanıcıların tıklamasını istediğiniz sekme indeksleme öğeleri bunun için hayati önem taşır. Belgede varsayılan konumuna eklemek için 0 sekmesini işaretleyin. Klavye navigasyonu kullanan kişiler tarafından normalde ulaşılmasını istemiyorsanız, -1 olarak ayarlayın. Bu, normal sekme sırasının dışında olduğu anlamına gelir, ancak kullanıcının odağını javascript/jquery .focus() aracılığıyla el ile koymak istediğinizde yine de gezinilebilir. Belirtildiği gibi, bazen klavyenin yönlendiricileri/ekran okuyucu kullanıcılarına odaklarını onlara göre hareket ettirerek yardımcı olabilirsiniz. Bir butona tıklarsanız bir menü görünür. Menünün ilk linke koymak böyle bir şey yapabileceğini:

$('#linkmenuactivator').on("click", function() { 
    $('#linkmenu').find('li:first a').focus(); 
}); 

Bunun JQuery olduğunu biliyorum, ben angularjs aşina değilim ama benim kısa görünümü beni bir ViewModel kumandanın fazlası var düşündürüyor JQuery gibi belirli bir kullanıcı arayüzünün aksine, yanılıyorsam beni düzeltin. Bir ekran okuyucu kullanıcı için hiçbir anlam ifade edecektir ekranda korkak şeyler yapıyorsan

Canlı bölgeler kullanılabilir. Sen metinsel bilgiyi söndürmek için bu bölgelerdeki elemanların metin yazabilirsiniz. Bunu yapmanın en kolay yolu, önemli mesajlar veya genel durum güncellemeleri için sırasıyla bir uyarı veya durum rolünü kullanmaktır. Bu roller senin eleman varsayılan olarak canlı bölge yapmak ve orada herhangi bir metin değişiklikleri ekran okuyucu bildirilecektir. Yani hızlı bir örnek şu şekilde görünecektir:

<p id="ariastatusbox" ... role="status"></p> 

Ardından daha sonra JQuery içinde (Belge yerleştirme size örnek alarak ve bunu solmaya bunu alınca):

$('#maincontent').fadeIn(function() { 
    $('#ariastatusbox').text('Document loaded'); 
}); 

Bu ekran okuyucusunun belgenin yüklendiğini ve ekranda okunmaya hazır olduğunu bilmesini sağlayacaktır. Canlı bölgeler biraz zor olabilir, ancak onları yönetebilirseniz güçlü bir canavardırlar.

Son olarak, erişilebilirlik testine gibi birkaç seçenek var. Bir şey Geçenlerde rastladım bir online test aracı olarak görünmektedir Wave olduğunu. İlk bakışta iyi görünüyor, bunu deneyebilirsin.Başka bir seçenek, bir ekran okuyucusunu kendiniz almanız ve bir adım atmanızdır. Açık kaynak kodlu (bu nedenle ücretsiz) bir ekran okuyucu olan NVDA'u öneririm. Bu benim ekran okuyucu seçimim ve oldukça iyi. Birlikte gelen sentezleyici en güzel seslere sahip değildir, ancak başka seçenekler de vardır, ya da konuşma çıktısını kapatabilir ve Konuşma Görüntüleyici'yi kullanarak söylenecek şeyin metinsel bir görünümünü görüntüleyebilirsiniz. Son bir seçenek, uygulamanızı bir test sürüşüne götürmek için erişilebilirlik testlerini sormaktır. Tüketici ürünleri veya bu parantez içindeki şeyler için, kör insanlar ve erişilebilir teknoloji kullanan diğer kullanıcılar, eğer istenirse bunu yapmak için gönüllü olabilirler. Bir kamu forumunda istemeyebileceğiniz daha fazla iş odaklı uygulamalar için, web uygulamalarını erişilebilir hale getirme konularında istişarede bulunabilecek çeşitli kuruluşlar vardır.

Bu, hiçbir şekilde erişilebilirlik konusunda kapsamlı bir kılavuz değildir, sizi doğru yönde gerçekten kasıp kavurmayı umuyordum. Biraz daha derin bir bakış için, ARIA roles belgelerine bakmayı deneyin (hepsi yardımcı olacaktır, ancak kod, başlıklar başlığı altındadır) ve bundan itibaren ARIA States and Properties documentation. İkisi de biraz kuru olabilir, ama aynı zamanda ARIA'yı kullanabileceğiniz her şeyin tam listesine de sahipler. Google da bazı öğreticiler verebilmeli, umarım.

Umarım başlamanıza yardımcı olur. İyi şanslar!