Doc Doc Pop Drop: Sitenizde erişilebilirliği ihlal etmenin 5 yolu

Doc’un WordPress News Drop, en acil WordPress haberleri hakkında haftalık bir rapordur. Haberler düştüğünde, alıp doğrudan size göndereceğim.
Bu haftanın video damla videosunda, sitenize bazı kullanıcılar için yanlışlıkla zarar verebileceğiniz 5 yol hakkında konuşuyoruz. WordPress haberleri gibi, ama okumaktan nefret mi ediyorsunuz? Benim adım Doc ve bu News Drop Doc Pop. Web, dünyanın dört bir yanındaki milyarlarca kullanıcı için iyi bir kaynaktır. Bu, bilgiye erişim sağlar, toplumu birleştirir ve benim gibi insanları gerçekten tanımadığım bir alanda yürürken biraz daha rahat hissetmeleri için güçlendirir. Bu aynı zamanda kolay erişime sahip olmayan insanlar için çok değerli bir araçtır (engelli insanlar için daha iyi bir terim var mı?). Birçok kör kullanıcı ve kör insan, ihtiyaç duydukları bilgiler için sitelerde kolayca gezinmek için metin-konuşmalara ve diğer web standartlarına bağlıdır, ancak birçok web tasarımcısı yeni bir site oluştururken bu özel grubu düşünmeyebilir. Çoğu zaman, kullanıcılar sayfada erişilebilirlik ile ne okusa da, navigasyonun yapılması hala zordur. Bir web sitesinin yapısal ve fonksiyonel kısımlarını tanımlamak önemlidir.
World Wide Web Konsorsiyumu, web siteleri tasarlarken hangi standartlara uyulması gerektiği konusunda iyi tavsiyelerle Web İçeriği Erişilebilirliği veya WCAG için bir kılavuz yayınladı. Bu hafta, sitenizin kör ziyaretçiler için erişilebilirliği ihlal etmesinin 5 yolundan bahsedeceğiz. Bir web tasarımını başlatırken metni görüntüye sabitlersiniz, çoğumuz görsel olarak düşünüyoruz, sonra parametre etrafında tasarlamak için çalışıyoruz. Güzel görüntülerin üzerinde çok şık olan makro görüntülerin ve metinlerin görünümü ile, birçok site metin-konuşma okuyucuları okumayı imkansız hale getirir. (Resmin üzerindeki ünlü alıntıların örneklerini gösterin) Örneğin, bu, tüm açıklamaların JPEG görüntüsünde yazıldığı bir Kickstarter projesidir. En iyi başlık ve açıklamaya ek olarak, kör müşteriler projeyi inceleyemez. Bu sadece fotoğraftaki metin değil. Bir e -posta ekran görüntüsü veya başka bir web sitesi yayınladığınızda, metnin önemli bölümlerini vizyon bozukluğu olan okuyucular tarafından yanlışlıkla okunmamış hale getirebilirsiniz. Dinamik metinli görüntüleri kullanmak her zaman kötü değildir, genellikle herhangi bir gönderiyi mevsimlik yapmak için iyi bir yol bile, ancak bu görsel içerik için alternatif metinler kullandığınızdan emin olun.
Başka bir deyişle, resimleri paylaşırken ALT’ın başlığını ve açıklamasını sağladığınızdan emin olun. WordPress editörü bu görevi çok kolaylaştırır, bunu yapmamak için hiçbir neden yoktur. H2 ve H2 etiketleri gibi H2 yanlış etiket başlığı kullanma, yalnızca biçimlendirme için tasarlanmamıştır. Bu HTML etiketi aslında belgelerin yapısal hiyerarşisi hakkında bilgi sağlar. Selamların metin okuyucuları bu etiketi tanımlayabilir ve navigasyon kullanımı için kör okuyucular için bir içerik listesi sağlayabilir. Daha büyük bir yazı tipi veya farklı bir format kullanmak, bu görevi zorlaştırır. Kör kullanıcılar sizin için ne kadar net görünür olursa olsun görsel değişiklikleri göremiyorlar. Bu, geçmişte suçlu olduğumu bildiğim bir şey. Genellikle H2 başlığı görünümü ile sınırlı hissediyorum, bu yüzden daha büyük veya daha kalın bir yazı tipi kullanacağım. Ya da farklı parçaları kırmak için hiç biçimlendirmeden çok uzun bir yazı yazmış olabilirim. Doğru başlık etiketlerini kullanmanın, özellikle parçaları parçalamak için H2’yi kullanarak, sitenizi daha erişilebilir hale getirmekle kalmayıp aynı zamanda genel olarak düzeni arttırdığını öğrendim. Görsel bir sanatçı olarak işlevsellik yerine bir stil seçiyorsunuz, gerçekten güçlü bir renk paleti seçme ve hızlı tutma cazibesini alıyorum, ancak yüksek okunan bir kontrast yazı tipi seçmek önemlidir. Birçoğumuz bir sayfada sona erdik ve metni okumak için gerçekten büyümemiz gerekiyor.
Yazı tipi renginiz arka planınıza çok benziyorsa veya resmin üstünde dinamik bir metin yayınlıyorsanız, bazı okuyucuları görsel bozuklukları veya renk körlüğü zorluklarını içeriğinizi okumakta zorluk çekebilirsiniz. İnce yazı tipleri kullanıyorsanız beyaz arka planlarda siyah metin bile zor olabilir veya ekstra ışık. Özellikle küçük boyutlarda. Yüksek kontrastlı bir arka plan ve büyük boyutta okunması kolay bir yazı tipi kullanmaya çalışın. Her şeyin 14pt kalınlığında ekstra bir metin olması gerektiğini, ancak daha ince bir yazı tipi kullanırken seçici olması gerektiğini söylemiyorum.
Yan notalar, PT’deki yazı tipinin boyutunu veya ekran kuvvet sayfaları için diğer mutlak uzunluk birimlerini belirlemeyin. Platform boyunca tutarsız bir şekilde görüntülenir ve kullanıcı aracısı (örn. Tarayıcı) tarafından değiştirilemez. WCAG diyor ki: Belge için temel yazı tipi boyutu ayarlanmışsa, mutlak bir boyut kullanın ([xx-small | x-small | küçük | orta | büyük | büyük xx-big] veya nispi boyut ([daha büyük | daha küçük]) Belgedeki belirli öğeler için yazı tipi boyutunun belirlenmesi. Web siteniz dinvigation için çok zor, web sitenizde navigasyonu çok benzersiz bir web deneyimi haline getirmek için çok havalı bir dizi CSS hilesi ve stili var. Kablolu ve _____ hakkında bir hikayenin nasıl anlatılabileceğinin sınırlarının ötesinde bazı iyi makaleler gördüm, ancak sayfanızın gezinmek için bir fare veya izleme turu ihtiyacı varsa, erişilebilirliğine zarar verebilirsiniz.
Birçok kullanıcı fareyi fiziksel olarak kullanamaz, böylece sitenizi yalnızca klavyeden gezebilirler. Sitenizdeki çeşitli bağlantılara erişmek için Sekme düğmesini kullanamazlarsa veya bir klavye tuzağına sahip değillerse, sitenizi kullanamazlar. Bir klavye tuzağı dediğimde, fare kullanmadan siteyi terk etmenize izin vermeyen eklentiler, widget’lar veya javascript hilelerine başvuruyorum. Flash gibi bazı uygulamaların kullanıcıları bir bölüme yakaladığı bilinmektedir. Neyse ki, sitenizi klavye uyumluluğu için test etmek kolaydır. Araç gerekmez, sitenizi sadece bir klavye ile gezinmeye çalışın ve hangi parçaların fare olmadan gezinmesi imkansız olduğunu görün. Aria Landmark Aria Tengara, sayfalarınızdaki öğelere ekleyebileceğiniz özelliklerdir. Ana içerik veya navigasyon alanı gibi alanı belirleyin. Bazı örnekler navigasyon, formlar, ana ve aramadır. Bir ekran okuyucusu “gezinme” gibi bu etiketi bulduğunda, kullanıcılar bu bölümü sitenin ana sayfasında gezinmek için kullanabileceklerini bilirler. “Keşfet” etiketini bulurlarsa, sitenizi izlemek için kullanabileceklerini bilirler. Aria Tengara’yı destekleyerek, sitenizi kör okuyucular tarafından daha kolay erişilebilir hale getirirsiniz. Ancak bu özel HTML etiketi olmasa bile, okuyucular metin bağlantısı sırasında sitenizde hala gezinebilirler.

Bu nedenle, yalnızca “Ara” yazan bir metin bağlantınız varsa, kullanıcılar için ARIA “Ara” etiketini kullanmanıza gerek yoktur, ancak arama çubuğunuzda herhangi bir metin yoksa ve yalnızca formda veya bazı aptal büyüteç camında varsa Semboller, kör okuyucular onu kullanamayabilir. Bu nedenle, bağlantınız için açık bir açıklayıcı metin kullandığınızdan veya daha tutarlı bir deneyim için Aria Tengara etiketini destekleyin. Bu haftanın haberleri için hepsi bu, izlediğiniz için teşekkür ederim. Web erişilebilirliği hakkında daha fazla bilgi için Josh Pollock ve Nick’in Torque Magazine’deki makalemize erişilebilirlik hakkında bir şeyler yapın. Orada bir bağlantı ve en iyi uygulama için standart vereceğim. Ayrıca Josh ile YouTube kanalımızda erişilebilirlik hakkında kısa bir röportaj videosu yayınladım (klibinin merdivenler ve yamaçlar hakkında konuşmasını gösteriyor) hepimiz sitemize daha fazla kullanıcı almaya çalışıyoruz. Daha fazla kullanıcı, daha fazla E-Niaga satış veya daha fazla yorum veya aradığınız her şey anlamına gelir. Sitenize devam etmek, yalnızca iyi bir uygulamaya değil, aynı zamanda çevrimiçi içeriğinizden maksimum sonuçları almanızı sağlayabilir. Web sitelerinde gezinirken en büyük zorluğunuz nedir? Bize aşağıdaki yorumlarda anlatın.