Erişilebilirlik ve başlıklar: görme engelli kullanıcılar için tasarım

Web sitenizde veya uygulamanızda başlıkları nasıl kullandığınız gibi küçük bir ayrıntı, potansiyel müşterilere veya satışlara mal olabilir. Web sitenizin neden erişilebilir olması gerektiğini, erişilebilir olmaması durumunda neler olabileceğini ve kullanıcıları bir sayfada doğru şekilde yönlendirmek için başlıkları nasıl kullanabileceğinize ilişkin en iyi uygulamaları öğrenmek için okumaya devam edin.

Erişilebilirlik davası

Yeni bir web sitesi tasarlarken veya eskisini güncellerken başlıklar kolayca gözden kaçabilir. Pazarlamacılar, tasarımın estetik tarafına daha fazla ve pratik tarafına daha az odaklanma eğilimindedir. Görsel öğelerin bir web sitesinin kullanıcı deneyiminde (UX) önemli bir rol oynadığı doğrudur, ancak onu görme engelli kullanıcılar için daha erişilebilir kılmak dönüşüm sağlayan ziyaretçi sayısını artırabilir.

İstatistikler, erişilebilirlik konusundaki iddiamızı güçlendiriyor:

• dünya çapında yaklaşık 253 milyon insan görme bozukluğundan muzdarip
• İngiltere'de her gün 250 kişi gözlerini kaybetmeye başlıyor
• İngiltere'de 2 milyondan fazla kişi sürücüye günlük yaşamlarında mesela yetersizlik üzerinde önemli bir etkisi vardır görme kaybı ile yaşamak
• yaşa bağlı dejenerasyon, yetişkinlerde körlüğün önde gelen nedenidir .

4,1 milyon kişi 2050 yılında İngiltere'de görme kaybından etkilenen beklenen, işletmeler tüm kitlelere web sitelerini adapte değil göze alamaz. Bu, özellikle hedef pazarları, görme sorunları yaşama olasılığı daha yüksek olan daha eski bir demografik ise önemlidir.

Başlıkları doğru kullanmak gibi basit bir özellik büyük bir fark yaratabilir ve uygulaması zor değildir. Ayrıca sizi bir davadan geçme maliyetlerinden de kurtarabilir.

Domino davası

Domino's Pizza, görme engelli kullanıcılar için erişilebilirliği ihmal etmenin ne kadar maliyetli olabileceğinin güzel bir örneğidir.

Kör bir ABD'li müşteri, üst malzeme seçmeye, indirim kodu kullanmaya ve hatta restoranın iPhone uygulamasında siparişini tamamlamaya çalıştıktan sonra 2016 yılında şikayette bulundu. Sorun, uygulamanın, doğru kullanılan metne ve metinle etiketlenen görüntülere göre içeriği seslendiren telefonun ekran okuma yazılımıyla entegre olmamasıydı. Şirketin uygulaması ve web sitesi, iPhone'un seçenekleri okumasına izin verecek doğru koddan yoksundu.

Yargıçlar başlangıçta Domino's'un yanında yer alırken, temyiz mahkemesi geçen hafta şu gerekçeyle müşterinin lehine karar verdi: “ Domino'nun web sitesine ve uygulamasına erişilemediği iddiası, halka açık yerler olan fiziksel pizza bayiliklerinin mal ve hizmetlerine erişimi engelliyor. konaklama ”.

Birleşik Krallık'ta, Kraliyet Ulusal Körler Enstitüsü de BCC için şu yorumu yapan kararı memnuniyetle karşıladı : “ 2010 Eşitlik Yasası uyarınca tüm kuruluşların , web sitelerinin ve uygulamalarının, bu kişiler de dahil olmak üzere kör ve kısmen gören kişiler tarafından kullanılmasını sağlamaktan sorumlu olmaları gerekir. ekran okuyucu kullananlar”.

İşletmelerin web sitelerini daha erişilebilir hale getirmenin farklı yolları vardır ve başlık etiketlerini doğru kullanmak, bir kullanıcının bir sayfada gezinmesine yardımcı olmak için uzun bir yol kat eder.

Erişilebilirlik için başlıklar için en iyi uygulama

Kısmen geliştiricilerin bir tasarımı çok yakından takip etmesi veya tasarımcıların başlıkları kullanmanın doğru yolunun farkında olmaması nedeniyle, biraz kafa karışıklığı ve yanlış kullanım var.

Bir başlığın ne olduğundan emin değilseniz, W3C'nin iyi bir tanımı vardır ve Yoast SEO kullanımını açıklar.

W3C, doğru kullanımı şu şekilde tanımlar:

"H1'den H6'ya kadar olan altı başlık öğesi, bölüm başlıklarını belirtir. Başlıkların sırası ve oluşumu HTML DTD tarafından kısıtlanmasa da, bu tür belgeleri başka gösterimlere dönüştürmek genellikle sorunlu olduğundan, belgeler seviyeleri atlamamalıdır (örneğin, H1'den H3'e).

Başlıkların doğru kullanımı yalnızca insanların ve Google'ın sayfanızı nasıl okuduğunu etkilemekle kalmaz, aynı zamanda ekran okuyucuların içeriğinizi kullanıcıya nasıl sunduğu üzerinde de büyük bir etkiye sahiptir. Erişilebilirlik araçlarını kullanan kişiler, başlıklarınız aracılığıyla sayfada gezinebilir, bu nedenle söylemek istediğiniz önemli bir şey varsa, bunu istediğiniz gibi yapısal ve görsel olarak sunmalısınız.

Sayfanızı oluştururken başlıkları erişilebilir kılmak için ekstra bir çalışmaya gerek yoktur. Doğru kullanımı izlerseniz, erişilebilirlik kriterleri karşılanacaktır. Başlıklar için W3c erişilebilirlik tavsiyesi bunu oldukça iyi açıklıyor ve gördüğünüz gibi sadece erişilebilirlik için değil, yapısal ve görsel olarak da mantıklı.

Başlıkları nasıl kontrol edebilirim?

Geliştiricileriniz veya temanız başlıkların doğru kullanımını takip ediyorsa, içeriğinizi eklemeniz ve başlığınızı editör/CMS aracılığıyla doğru şekilde eklemeniz gerekir.

Bir yan not olarak, her yere başlık eklemeniz gerekmez, basit bir H1 (genellikle sayfa başlığıdır) ve ardından bir H2 yeterlidir - ancak diyelim ki özellikle uzun bir sayfayı doğru bir şekilde yapılandırmak istiyorsunuz veya başka birinin sayfasını kontrol ediyorsunuz. iş? Favori tarayıcınız için bu eklentilerden birini kullanmayı deneyin:

• Chrome için başlıklar haritası
• Firefox için başlıklar haritası

Kurulduktan sonra kullanımı çok kolaydır ve eklenti düğmesine tıkladığınızda kenar çubuğunda yanlış başlıklar kırmızıyla vurgulanır. Bu özellik ayrıca WordPress 5.0 sürümündeki Gutenberg düzenleyicisinde varsayılan bir seçenek olacaktır ve bu sitede açıklanmıştır.

Başlıkları kullanmanın doğru yolu:

Başlıkları kullanmanın yanlış yolu:

Aşağıdaki resim, yapı yerine stil için kullanılan başlıkları göstermektedir. Bu, işaretleme hatalarına neden olur ve anlamsal olarak yanlış olur – bunları bu şekilde kullanmaktan kaçının!

Umarım bu yazı, web sayfalarınızı herkes için doğru bir şekilde yapılandırmanıza yardımcı olur.

Web Geliştirmenizle ilgili yardıma ihtiyacınız varsa, bizimle iletişime geçmekten çekinmeyin.