Web İçin Erişilebilir UI Bileşenleri

UI bileşenlerinin erişilebilir olması için, farklı ekran boyutlarında ve farklı türde girdilerde birden fazla cihaz üzerinde çalışması gerekir. Ayrıca, bileşenler, engelli olanlar dahil, en geniş kullanıcı grubu tarafından kullanılabilir olmalıdır.

Erişilebilirlik için tasarım yaparken, göz önünde bulundurulması gereken dört ana engellilik alanı vardır: görsel, işitsel, mobilite ve biliş.

Görsel konular, renkleri ayırt edememekten hiç bir vizyona kadar değişmeyebilir.

  • Metin içeriği için minimum kontrast oranı eşiğinin sağlandığından emin olun.
  • Yalnızca renk kullanarak bilgi iletmekten kaçının ve tüm metnin yeniden boyutlandırılabilir olduğundan emin olun.
  • Tüm kullanıcı arayüzü bileşenlerinin, ekran okuyucular, büyüteçler ve braille ekranlar gibi yardımcı teknolojilerle kullanılabildiğinden emin olun. Bu, UI bileşenlerinin erişilebilirlik API'lerinin herhangi bir öğenin rolünü, durumunu, değerini ve unvanını programlı olarak belirleyebileceği şekilde işaretlenmesini sağlar.

İşitme sorunları, bir kullanıcının bir sayfadan yayılan işitme sesleri yaşayabileceği anlamına gelir.

  • Tamamen metin olmayan tüm içerikler için metin alternatiflerini kullanarak içeriği anlaşılır hale getirin.
  • UI bileşenlerinin ses olmadan hala işlevsel olduğunu test ettiğinizden emin olun.

Mobilite sorunları, farenin, klavyenin veya dokunmatik ekranın çalışmamasını içerebilir.

  • UI bileşenlerinin içeriğini, bir fare için kullanacağınız tüm işlemlerde klavyeden işlevsel olarak erişilebilir duruma getirin.
  • UI bileşenlerinin yardımcı teknolojiler için doğru şekilde işaretlendiğinden emin olun; Bu kullanıcılar, ses kontrol yazılımı ve fiziksel anahtar kontrolleri gibi teknolojiler kullanabilir; bunlar ekran okuyucular gibi diğer yardımcı teknolojilerle aynı API'leri kullanma eğilimindedir.

Bilişsel sorunlar, kullanıcının metin okumaya yardımcı olması için yardımcı teknolojiler gerektirebileceği anlamına gelir, bu nedenle metin alternatiflerinin varlığını sağlamak önemlidir.

  • Bazı kullanıcıların sorunlarına neden olabileceğinden, tekrarlayan veya yanıp sönen görsel bir sunumdan kaçının.
  • Zamanlamaya dayalı etkileşimlerden kaçının.

Bu, ele alınması gereken birçok temel gibi görünebilir, ancak UI bileşeninizin erişilebilirliğini değerlendirme ve iyileştirme sürecini inceleyeceğiz.

UI bileşeninize erişilebilir mi?

Özet (tl; dr)

Başvurunuzu erişilebilirlik açısından denetlerken kendinize sorun:

  • UI bileşeninizi yalnızca klavyeyle kullanabilir misiniz? Odak tuzaklarından uzak durmayı ve odaklanmayı başarır mı? Uygun klavye olaylarına cevap verebilir mi?
  • UI bileşeninizi ekran okuyucu ile kullanabilir misiniz? Görsel olarak sunulan herhangi bir bilgi için metin alternatifleri sağladınız mı? ARIA kullanarak anlam bilgisi eklediniz mi?
  • UI bileşeniniz ses olmadan çalışabilir mi? Hoparlörlerinizi kapatın ve kullanım durumunuzu gözden geçirin.
  • Renksiz çalışabilir mi? UI bileşeninizin renkleri göremeyen biri tarafından kullanılabildiğinden emin olun. Renk körlüğünü simüle etmek için yararlı bir araç SEE adlı bir Chrome uzantısıdır (mevcut dört renk körlüğü simülasyonunu da deneyin). Benzer şekilde faydalı olan Daltonize uzantısı da ilginizi çekebilir.
  • UI bileşeniniz yüksek kontrast modu etkinken çalışabilir mi? Tüm modern işletim sistemleri yüksek kontrast modunu destekler. Yüksek Karşıtlık, burada yardımcı olabilecek bir Chrome eklentisidir.

Yerel denetimler ( ve dahil tüm web form kontrollerinde zaten desteklenmektedir. Kendi özel UI bileşenlerinizdeki öğeleri otomatik odaklamak için, odaklanabilen tüm HTML öğelerinde desteklenen focus () yöntemini çağırın (ör. Document.getElementById (‘myButton’). Focus ()).

Klavye etkileşimi ekleme

UI bileşeniniz odaklandığında, bir bileşen odaklandığında, uygun klavye olaylarını ele alarak iyi bir klavye etkileşimi hikayesi sağlamaya çalışın; örneğin, kullanıcının menü seçeneklerini seçmek için ok tuşlarını kullanmasına izin verin ve düğmeleri etkinleştirmek için boşluk bırakın veya girin. ARIA tasarım desenleri kılavuzu burada bazı rehberlik sağlar.

Son olarak, klavye kısayollarınızın keşfedilebilir olduğundan emin olun. Örneğin, yaygın bir uygulama, kullanıcıyı kısayolların mevcut olduğu konusunda bilgilendirmek için bir klavye kısayolu göstergesine (ekran metni) sahip olmaktır. Örneğin, “Basın? klavye kısayolları için ”. Alternatif olarak, bu tür bir araç ipucu, kullanıcıyı mevcut kısayol hakkında bilgilendirmek için kullanılabilir.

Odağı yönetmenin önemi anlaşılamıyor. Bir örnek bir navigasyon çekmecesidir. Sayfaya bir UI bileşeni eklerseniz, odağı içindeki bir öğeye doğrudan yönlendirmeniz gerekir, aksi takdirde kullanıcıların oraya ulaşmak için tüm sayfayı sekmesi gerekebilir. Bu sinir bozucu bir deneyim olabilir, bu nedenle sayfanızdaki klavyede gezinilebilir tüm bileşenler için odağı test ettiğinizden emin olun.

UI bileşeninizi ekran okuyucu ile kullanabilir misiniz?

Kullanıcıların yaklaşık% 1-2'si bir ekran okuyucu kullanacaktır. Bu makalenin sonunda, kullanımı ücretsiz olan bazı ekran okuyucuları listeler: bileşeninizi bu ekran okuyuculardan en az biriyle kullanmayı deneyin. Tek başına ekran okuyucuyu ve klavyeyi kullanarak tüm önemli bilgileri belirleyebilir ve bileşenle etkileşimde bulunabilir misiniz?

Aşağıdaki sorular ekran okuyucu erişilebilirliğini ele almanıza yardımcı olacaktır:

Tüm bileşenlerde ve görüntülerde anlamlı metin alternatifleri var mı?

İnteraktif bir bileşenin adı veya amacı hakkında bilgi görsel olarak taşınırsa, erişilebilir bir metin alternatifi sağlanmalıdır.

Örneğin, UI bileşeniniz yalnızca .. gibi bir simge görüntülerse

Ayarlar menüsü simgesi

bir ayarlar menüsü olduğunu belirtmek için, aynı bilgileri taşıyan “ayarlar” gibi erişilebilir bir metin alternatifine ihtiyacı var. Bağlama bağlı olarak, bu, Gölge DOM'da bir alt öznitelik, bir arya etiket özniteliği, bir arya etiketli öznitelik veya düz metin kullanabilir. Genel teknik ipuçlarını WebAIM Hızlı Başvuru bölümünde bulabilirsiniz.

Bir görüntüyü gösteren herhangi bir UI bileşeni, bu görüntü için alt niteliğe benzer bir alternatif metin sağlamak için bir mekanizma sağlamalıdır.

Bileşenleriniz anlamsal bilgi sağlıyor mu?

Yardımcı teknoloji, başka bir deyişle görmedik kullanıcılara biçimlendirme, imleç stili veya konum gibi görsel işaretlerle ifade edilen semantik bilgileri aktarır. Yerel öğeler, tarayıcıda yerleşik olan bu semantik bilgilere sahiptir, ancak özel bileşenler için bu bilgiyi eklemek için ARIA kullanmanız gerekir.

Genel bir kural olarak, bir fare tıklaması veya üzerine gelme olayını dinleyen herhangi bir bileşenin yalnızca bir tür klavye olay dinleyicisine değil, aynı zamanda bir ARIA rolüne ve potansiyel olarak ARIA durumlarına ve niteliklerine sahip olması gerekir.

Örneğin, özel bir UI bileşeni, bazı ARIA özniteliklerine sahip bir ARIA kaydırıcı rolünü üstlenebilir: aria-valuenow, aria-valuemin ve aria-valuemax. Bu nitelikleri, özel bileşeninizdeki ilgili özelliklere bağlayarak, yardımcı teknoloji kullanıcılarının öğeyle etkileşime girmesini ve değerini değiştirmesini ve hatta öğenin görsel sunumunun buna göre değişmesine neden olabilirsiniz.

Bir aralık kaydırıcı bileşeni
 

Kullanıcılar renge güvenmeden her şeyi anlayabilir mi?

Renk, bir durum belirtme, bir yanıt isteme veya görsel bir özel bileşeni ayırt etme gibi bilgileri iletmenin tek yolu olarak kullanılmamalıdır. Örneğin, yoğun, ılımlı ve hafif trafik arasında ayrım yapmak için renk kullanan bir bileşeni oluşturduysanız, trafik düzeylerini ayırt etmek için alternatif bir yöntem de kullanılabilir: bir çözüm bilgi görüntülemek için bir öğenin üzerine gelmek olabilir Bir araç ipucunda.

Metin / görüntüler ve arka plan arasında yeterli kontrast var mı?

Bileşeninizde görüntülenen herhangi bir metin içeriği, minimum (AA) kontrast çubuğunu karşılamalıdır. Daha yüksek (AAA) çubuğu karşılayan yüksek kontrastlı bir tema sunmayı düşünün ve kullanıcılar aşırı kontrast veya farklı renkler gerektiriyorsa, kullanıcı aracısı stil sayfalarının uygulanmasını sağlayın. Tasarım yaparken bu Renk Kontrastı Denetleyicisini yardım olarak kullanabilirsiniz.

Bileşenlerinizdeki hareketli veya yanıp sönen içerik durdurulamaz ve güvenli midir?

5 saniyeden uzun süren, hareket eden, kaydırılan veya yanıp sönen içeriklerin duraklatılması, durdurulması veya gizlenmesi gerekir. Genel olarak, saniyede en fazla üç kez yanıp sönmeyi deneyin.

Erişilebilirlik Aletleri

Görsel bileşenlerin erişilebilirliğini hata ayıklamaya yardımcı olabilecek birkaç araç bulunmaktadır. Bunlar şunları içerir:

  • ax - çerçeve veya tercih ettiğiniz tarayıcı için otomatik erişilebilirlik testi
  • Chrome'un Deniz Feneri erişilebilirlik denetimleri, erişilebilirlik sorunlarını keşfetmek için yararlı bilgiler sağlar.
DevTools'ta Yerli Erişilebilirlik Denetimi
  • Tenon.io - yaygın erişilebilirlik sorunlarını test etmek için kullanışlıdır. Tenon, derleme araçları, tarayıcılar (uzantılar aracılığıyla) ve hatta metin düzenleyicilerinde güçlü bir entegrasyon desteğine sahiptir.
  • Yardımcı teknolojilerin web içeriğini nasıl göründüğünü Erişilebilirlik Denetçisi (Mac) veya Windows Otomasyon API Test Araçları ve AccProbe (Windows) kullanarak inceleyebilirsiniz. Ek olarak, Chrome'un oluşturduğu tam erişilebilirlik ağacını chrome: // erişilebilirliğine giderek görebilirsiniz.
  • Mac'te ekran okuyucu desteğini test etmenin en iyi yolu, VoiceOver yardımcı programını kullanmaktır. Etkinleştirmek / devre dışı bırakmak için ⌘F5, sayfa içinde hareket etmek için Ctrl + Option ← → ve ağacı yukarı / aşağı taşımak için Ctrl + Shift + Option + ↑ ↓ tuşlarını kullanabilirsiniz. Daha ayrıntılı talimatlar için, tüm VoiceOver komutlarının listesine ve VoiceOver Web komutlarının listesine bakın.
  • tota11y, Khan Academy tarafından oluşturulan yardımcı teknoloji sorunları için faydalı bir görselleştiricidir. Belgenize, yetersiz kontrast oranı ve diğer a11y ihlalleri gibi şeylere açıklama eklemek için çeşitli eklentileri tetikleyen bir düğme ekleyen bir komut dosyasıdır
  • ally.js (Rodney Rehm tarafından), uygulamanıza birkaç erişilebilirlik özelliği eklemeyi basitleştirmeye çalışan bir kütüphanedir. Tüm odaklanabilir veya sekmeli öğeler için DOM'un sorgulanmasına yardımcı olur, belirli DOM alt ağaçlarına odaklanır, odaklamanın nasıl değiştiğini ve diğer birkaç yardımcı ile birlikte geldiğini belirlemeye yardımcı olur.
  • Windows'ta NVDA, tam özellikli ve popülerliği hızla artmakta olan ücretsiz, açık kaynaklı bir ekran okuyucu. Ancak, görme sorunu olan kullanıcılar için VoiceOver'dan daha dik bir öğrenme eğrisi olduğunu unutmayın.
  • ChromeLens, görme engelli kişilerin gelişimine yardımcı olur. Ayrıca klavye gezinti yollarını görselleştirmek için de büyük destek aldı http://chromelens.xyz/
ChromeLens DevTools eklentisi, farklı körlük biçimlerini taklit etmek için çoklu seçenek, sekme izleme ve erişilebilirlik denetimi.
  • ChromeVox, Chrome uzantısı olarak kullanılabilen ve ChromeOS cihazlarında yerleşik olan bir ekran okuyucudur.

Not: Büyük teşekkürler, makaleye yardımcı olduğu için Alice Boxhall ve Rob Dodson'a gider.

Not: Daha fazla bilgi edinmek istiyorsanız, bu ücretsiz Udacity kursunda Erişilebilirlik temellerini öğrenebilirsiniz https://bit.ly/web-a11y