Web siteme erişilebilir olmasını sağlamak için izlemem gereken asgari adımlar nelerdir?


35

Yakın zamana kadar göz ardı ettiğimi itiraf etmem gereken çok önemli bir standarda uymaya çalışıyorum. Sayfalarıma engelli kişilerin büyük bir kısmının erişebildiğinden emin olmak istiyorum. Ağırlıklı olarak metin ve resim yoğun olan ancak video / flaş veya herhangi bir animasyon içermeyen derslere odaklanıyorum.

Web sitemi kullanırken çok sayıda engelli insanın iyi bir deneyim yaşamasını sağlamak için izleyebileceğim bir kontrol listesi nedir ve en çok hangi bilinçliliğe dikkat etmeliyim?

Herkesi memnun edemeyeceğimi biliyorum. İçinden gitmiş W3C kurallarına ancak tamamen emin standartlar benim için geçerli değil değilim. Web uygulamaları inşa etmiyorum, çoğunlukla bilgi alışverişi, blog ve ara sıra yapılan forum gibi wiki yapıyorum.


uxexchange.com?
Bobby Jack

Yanıtlar:


18
  • Her görüntünün alt metni olduğundan emin olun.
  • Renk düzeninizin renk körlüğü olanlar için uygun olduğundan emin olun.
  • Görme engelliler için yüksek kontrast düzeni veya büyük metin düzeni sunun.
  • Bağlamların bağlam dışında okunduğunda mantıklı olduğundan emin olun (yani sadece "buraya tıklayın" yazmayın).
  • Kullanıcının JavaScript desteği yoksa, sitenizin hala tüm temel işlevleri sunmasını sağlayın.

W3 , web sitesi aracılığıyla erişilebilirlik hakkında bazı temel ipuçları sunar . Joe Clark, çok sayıda yararlı bilgi içeren ve ücretsiz olarak görüntüleyebilen "Erişilebilir Web Siteleri Oluşturma" kitabının çevrimiçi bir versiyonuna sahiptir .


1
'Alt metin' kuralı için birkaç uyarı var. Ne yazık ki, bunu hızlı ve zor bir kural olarak gören insanlarla çalıştım - yani HER imgenin bir alt özelliği olması GEREKİR. Sonra bir logo görüntüsüne "Şirketimizin logosu" ve twitter hesabına bağlı bir görüntüye "büyük mavi" t '"gibi şeyler eklerler.
Bobby Jack

Alt etiketi ile, HER görüntüde bir tane olması gerektiğine inanıyorum. Bir ekran okuyucuyla çalışırken ne yapacağınızı söylemeniz gerekir. Görüntünüz görsel çekicilik için oradaysa ve başka bir değeri yoksa, ekran okuyucusunun yoksaymasını bilmesi için alt = "" kullanın. Görüntünüz bir grafik veya belki bir başlıksa, ekran etiketinin yanı sıra görüntüleri devre dışı bırakan kişilerin kaçırmaması için, alt etiketindeki bilgileri eklediğinizden emin olun.
ph33nyx

8

İşaretlemenizi anlamsal kılmak, sitenize herhangi bir CSS uygulanmadan gezilebiliyorsa ve içerik mantıklı geliyorsa, her şey sadece görsel sostur!


1
Çıplak CSS günü ve çok daha eğlenceli :)
Tim Post

2
Haha, doğal olarak! Cidden, birçok insan erişilebilirliğin tasarımla ilgili olduğunu varsayar, içeriğini tam bir tersine çevirirse, içeriğinizi herhangi bir tasarım olmadan çalışacak şekilde yapabilirseniz, o zaman bir makineye (ve dolayısıyla bir insana) her zaman erişebileceksiniz. o.
Toby,

7

Öncelikle “engelliler” hiçbir şey ifade etmiyor!

Bu yüzden, kontrol etmeniz gereken bazı gruplara bakalım, siteniz olabilir.

Sadece küçük ekranlı bir not defteri olan fakir bir insan

Web sitenizin tarayıcı penceresi çok küçük bir ağrı olmadan eşleşiyorsa kullanılabileceğini kontrol etmeniz yeterlidir.

Bir renk kör insan

Birisi web sitenizi, simgelerin rengini vb. Görmeden kullanabilir mi, görüntülemiş olabilirsiniz.

Zayıf siteye sahip bir kişi.

Tarayıcınızdaki yazım boyutunu değiştirdiğinizde, sitenizdeki tüm metinler büyür ve düzen yine de iyi olur. Ayrıca site hala küçük bir monitörde kullanılabilir mi?

Siteniz yüksek kontrast düzenini kullanıyor mu, kullanıcının yüksek kontrast düzenine geçmesi kolay değilse;

Fareyi kullanamayan bir kişi

Web sitenizi daha önce hiç kullanmayan bir kişi, klavyeyi kullanarak tüm işlevlere / bilgilere erişebilir mi? (Sekme tuşu yararlı bir şekilde çalışıyor mu?)

Zayıf okuma becerisine sahip biri

Mümkün olduğunca basit İngilizce mi kullanıyorsunuz?

Yeni şeyler öğrenmede iyi olmayan biri.

Sitenizin tasarımı, kullanıcılarınızın nasıl kullanılacağını zaten bildiği diğer sitelere dayanıyor mu?

Kör bir insan.

Bu zor olanıdır ve okuduklarınızın çoğu eşleşme kullanımı değildir!
İlk bakışta diğer tüm erişim problemlerimizi kısaltın, çünkü görme sorunu olan veya fareyi kullanamayan insanlardan daha fazla görmeyen insanlar olduğu için.

Daha sonra amaçlarınızı anlayın ; örneğin, siteniz bir otel rezervasyon sitesiyse, rezervasyon yapmak için ücretli bir telefon numarası sağlamak ve ardından otel bilgilerini erişilebilir yapmak daha iyi olabilir.

Görme engelli kişilerin çoğu, daha önce kullanmadıkları etkileşimli web sitelerini kullanmayı çok zor buluyor;

Öyleyse, hiçbir web seçeneği sunmamalısınız? (Telefon? Formu doldurmada yardımcı olmak için onları ziyaret eden kişi vb.)

Öncelikle siteniz hiçbir resim olmadan kullanılabilir mi? (Alt metin bunu yapmanın bir yoludur)

Konuşma yazılımı siteyi baştan aşağı okursa siteniz bu şekilde anlaşılabilir mi?

Bağlantılı bir kişinin kullanması için karmaşık gezinti içeren bir siteyi kolaylaştırmak çok zordur, aynı zamanda bağlanan bir kişi de sayfanın bir kısmının JavaScript tarafından güncellendiğini ve yeniden okunması gerektiğini bilmenin hiçbir yolu yoktur.

Durum değişiklikleri için öğelerin rengini değiştirmek de iyi bir seçenek değildir.

Bir web sitesinin nasıl bağlanabileceğini öğrenmenin tek yolu, insanlara nasıl bağlanacağını öğrenmenin tek yolu, bir insanın bazı web sitelerinde ekran okuyucuyu nasıl kullandığını görmektir. Standartların hiçbiri yeterince iyi değil, sadece ne yapmamanız gerektiğini size söylüyorlar, ancak bunları tutmak yeterli değil (bir haber sitesi gibi statik metinler sağlanmadığı sürece).


1
Bu cevabın ilk cümlesini seviyorum! (ve tabii ki diğer cümleler de)
Tim Post






1

# 1 cevabı basittir: geçerli, anlamsal olarak doğru HTML / CSS yaz !!! Yukarıdaki önerilerin tümü iyi. İşte birkaç yıl önce yazdığım ve tüm sitelerde kontrol etmeniz gereken birkaç şeyi gösteren bir kontrol listesi: https://forge.iowa.gov/wiki/index.php/Web_Checklist . FF üzerinde Web Geliştirici araç çubuğuna sahip olduğunuzu varsayar, ancak bu ücretsiz ve kolayca elde edilebilir.

Birkaç basit şey hissettiğim şeyler gerçek bir fark yaratabilir:

Formlar için LABEL etiketini kullandığınızdan emin olun. Radyo butonları gibi şeyler için daha geniş bir tıklanabilir alan yaratır ve aynı zamanda ekran okuyucular için bir araya getirir.

Sıklıkla yanlış kullanıldığını düşündüğüm bir diğer şey h1, h2, h3 ... etiketleri. Düzgün kullanılırsa, bunlar sayfanızda kolayca dolaşmanıza yardımcı olabilir. Onları sadece şekillendirir ve engebeli bir şekilde kullanırsak, ekran okuyucuları ve diğer faresiz I / O cihazları için çok yanıltıcı olur.

Ayrıca, tüm güzel CSS'niz ve resimleriniz olmadan sayfanızı dolaşan birisinin içeriğe tekrarlayan kodu geçmiş olarak atlamasına izin vermek güzeldir. Bu genellikle CSS'de gizlenmiş bir SKIP bağlantısı kullanılarak elde edilir. Örneğin, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>uzun bir navigasyonun atlanmasına izin vermek için.

Tony tarafından belirtildiği gibi, en iyi testlerden biri, sayfanızın tüm çan ve ıslıklarını kaldırmak ve hala anlam ifade edip etmediğine bakmaktır.


ALT etiketleri konusunda ... her görüntünün bir ALT etiketi olması gerekir . Eğer resim içerik ise, ALT etiketinde açıklayıcı bir şeye sahip olmalıdır, sadece dekorasyon ise, alt=""JAWS gibi ekran okuyucuların bunları geçebileceğini belirtmek için boş tırnak işaretleri kullanın.
ph33nyx 12:11
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.