Web tasarımcılarına, web sitenizi ziyaret edebilecek insanların göründüğü şeyleri göremediklerini söylediysem ne olur?
Görme engelli insanlar, hepimizle aynı nedenlerle web'de geziniyor, bilgi bulmak, alışveriş yapmak ve web tabanlı uygulamaları kullanarak sayısız önemli görevi yerine getiriyor. Ancak görme engelli kişiler web'i farklı bir şekilde tecrübe ediyor ve web sitelerini tasarlarken ve inşa ettiğimizde onların ihtiyaçlarına karşı duyarlı olmalıyız.
ABD Sayım Bürosu'na ve BM ve Dünya Bankası'na göre 47 milyondan fazla Amerikalı ve dünya çapında 650 milyona yakın insanın bir tür sakatlığı var. Tasarladığınız sitelere gelen her ziyaretçinin aradığı bilgileri bulabilmesi ve web sayfasının veya uygulamasının neye benzediğine bakmaksızın gerçekleştirmek istediği görevleri gerçekleştirmesi gerekir. Web sayfası veya uygulamanın oluşturulmasına yol açan birçok farklı faktör erişilebilirliği etkileyebilir.
Mavi hapı alırsın - hikaye biter, sen yatağında uyan ve inanmak istediğin her şeye inan. Kırmızı hapı alırsın - harikalar diyarında kalırsın, ve sana tavşan deliğinin ne kadar derin gittiğini gösteririm. - Matrix
Erişilebilir tavşanın benimle tutmasına hazır mısın? Web sayfalarının teknik yönlerine dalmamız gerekecek. HTML, bir web sayfasının iskeleti iken, CSS, JavaScript ve görseller HTML'yi geliştirir. Genellikle görme engelli insanlar tüm bu gelişmeleri kaçırırlar. Erişilebilirlik temel olarak bir geliştirici görevi olmakla birlikte, bazen erişilebilirliği korumak veya geliştirmek için gerekli teknik gereksinimler, web sitesinin görünümünü etkileyecektir. Bu, tasarım, kopyalama, kullanıcı deneyimi ve geliştirmenin, gezinme denetimleri, formlar, düğmeler, başlıklar, düğmeler, bağlantılar ve daha fazlasının erişilebilir olduğundan emin olmak için işbirliği yapması gerektiği anlamına gelir.
tasarım, kopyalama, kullanıcı deneyimi ve geliştirme, gezinme denetimlerinin, formların, düğmelerin, başlıkların, düğmelerin, bağlantıların ve daha fazlasının erişilebilir olduğundan emin olmak için işbirliği yapmanız gerekir.
Kör, görme engelli, okuma yazma bilmeyen veya öğrenme engelli kişiler internette gezinmek için yardımcı teknolojiler kullanırlar. Ekran okuyucular, web için en yaygın destekleyici teknolojidir, bu yazılım programları, web sayfasında görüntülenenleri yorumlamaya ve genellikle metni metne dönüştürerek kimi zaman Braille çıkış aygıtı aracılığıyla kullanıcıya aktarmaya çalışır. Ekran büyütücüleri de genellikle bir ekran okuyucu ile birlikte kullanılır. Tipik olarak bir ekran okuyucu HTML'yi HTML dosyasının en üstünden dibe ayrıştırmaya ve kullanıcıyla ilgili öğeleri konuşmaya çalışacaktır. İdeal olarak, ekran okuyucu, form alanlarını doldurmak, düğmelere tıklamak ve açılan menülerden ve diğer kontrollerden seçimler yapmak için kullanıcının sanal imleci başarılı bir şekilde sayfada aşağı doğru hareket ettirmesine izin verecektir.
Erişilebilirlik için eksiksiz bir şekilde test etmek için, web sitesinin veya uygulamanın, mevcut olan birçok ekran okuyucunun her birinde iyi performans gösterdiğinden emin olmanız gerekir. Her platformda dahil olmak üzere birçok popüler ücretsiz ve / veya açık kaynak ekran okuyucuları vardır. JAWS , ve NVDA . Microsoft kullanıcıları NVDA'yı kullanabilirken, Apple bilgisayarlar ve iOS cihazları ile birlikte gelir Ses bitti klavye kontrollerini büyütebilir ve ekran içeriğini okuyabilir ve Unix cihazları için katil balina . Chrome tarayıcısının iki yardımcı teknolojiye sahip eklentisi var. ChromeVox'u ekran okuma ve ChromeVis büyütme için.
Çoğu web erişilebilirlik problemi, ekran okuyucusunun sanal imleci, zayıf biçimde tasarlanmış bir formda sıkışıp kaldığında veya önemli bir kontrolün veya önemli bir metinsel bilgi parçasının üzerinde atlandığında ortaya çıkar. Web sitelerinin gerçekten kullanılabilir olduğunu doğrulamak, tarayıcı testlerine benzerdir, çünkü her ekran okuyucu farklı gereksinimlere ve sınırlamalara sahiptir. Bu nedenle, her ekran-okuyucunun davranışının anlaşılması önemlidir. Çeşitli ekran okuyucularının ihtiyaçları, sayfanın önemli öğelerine çeşitli özel HTML etiketleri ekleyerek yerleştirilebilir.
Modern dinamik web kullanıcı arayüzü, erişilebilirlik açısından özellikle sorunlu olabilir, çünkü önemli öğeler, JavaScript'i dinamik olarak kullanarak sayfaya eklenir. Özel açılır menüler, model, araç ipucu, akordeon içeriği ve dinamik hatalar ve bildirimler, HTML, JavaScript ve ekran okuyucu arasındaki iletişim kesintisi nedeniyle ekran okuyucularının anlaması zor olabilir. Yerel HTML ve JavaScript'in ekran okuyucularına sayfa (Belge Nesne Modeli) güncellemeleri için bir yolu yoktur. Geliştiricilerin, “odaklama” (ekran okuyucusunun sanal imleci) değiştirilen kullanıcı arayüzüne taşınması gerekir. Bir model açılırken geliştiricilerin, kullanıcının bu modal üzerinde odaklanmasını sağlaması gerekir; böylece ekran okuyucu bu içeriği okuyabilir ve kullanıcı bunu anlayabilir ve etkileşimde bulunabilir.
WAI-ARIA, sayfanın ham HTML'sinin ne dediği ve hangi kullanıcıların gördüğü arasındaki boşlukları köprüleyebilir
Bu, denilen özel HTML etiketlerinin kullanımıyla yapılır WEG-ARIA etiketleri. WAI-ARIA (Erişilebilir Zengin İnternet Uygulamaları), sayfanın ham HTML'sinin ne dediği ve geliştiricilerin devletlere, özelliklere, ilişkilere, rollere ve canlı bölgelere ekstra anlam katması için standartlaştırılmış bir yol sunarak gördükleri arasındaki boşlukları kapatabilir aksi takdirde bir ekran okuyucu anlamazdı. Geliştiriciler, ekran okuyucularına sayfadaki her bir başlığın hiyerarşisini açıklamak için aria düzeyini kullanabilir. Ari etiketli geliştiriciler, sayfadaki ayrı bir öğenin amacını açıklamak için bir başlık ekleyebilir. Bu, geliştiricilerin farklı öğeler arasında net ilişkiler oluşturmasına yardımcı olur. Geliştiriciler ayrıca, aria rol etiketleriyle etiketleyerek önemli kontrollere dikkat çekebilir, örneğin aşağı açılır menü düğmesi aşağıdaki etiketle etiketlenir: Aria-popup: true.
Kalemi görmek Basit Erişilebilir Sekmeler Scott Vinkle tarafından @svinkle ) CodePen .
Yukarıdaki örnekte HTML'de, sekmeler, her liste öğesinde sınıfları olan sırasız bir liste kullanılarak oluşturulur. JQuery, bir sekme tıklandığında tıklatma olaylarını yakalar ve seçili sekmeye 'aria-selected': 'true' ve 'tab-widget__tab-content — aktif' ekler ve 'aria-selected': 'öğesini ekleyerek diğer sekmeleri gizler. kalan sekmelere 'yanlış'. 127 numaralı satırda, sekmelerin başlangıç öznitelikleri ayarlanır; bu snippet'ler, ekran okuyucunun hangi sekmenin görünür olduğunu tanımasına yardımcı olur. 35. satırdaki JavaScript ayrıca sekmelere klavye desteği de ekler. Dosyanın geri kalanı, tıklama ve klavye olaylarını yakalar, böylece jQuery seçili sekmeye 'rol' ve 'sunum' öznitelikleri ekleyebilir.
Aria etiketleri, okuyucularla, özel kontrol etiketlendiğinde özel düğmeleri radyo düğmeleri olarak yorumlamalarına yardımcı olabilir: Aria-role = radio button. Bir uygulama, kullanıcıya geri bildirim veya güncellemeler ileten bir sanal alan alanına sahip olduğunda, canlı bir bölge etiketi ile etiketlenebilir: Aria-live. Bu, bu elemandaki metin değiştiğinde, ekran okuyucu aracılığıyla otomatik olarak kullanıcıya konuşulmasını sağlar.
Sayfa yenilemeleri, ekran okuyucuları için web'in önemli bir parçasıdır. Çünkü bir sayfa yenilemesi gerçekleştiğinde, ekran okuyucusuna, yeni sayfayı kullanıcıya duyurması ve sayfanın içeriğini kullanıcının yeniden okuması gerektiğini bildirir. Bu, tek sayfalık web uygulamalarının erişilebilirlik için özel zorluklar yarattığı anlamına gelir. Tek bir sayfa uygulamasında tam sayfa yenilenmez, böylece ekran okuyucu ve bu nedenle kullanıcı güncellenen içeriğe karşı uyarılmayacaktır. Sonuç, kullanıcının kendi eylemleri hakkında geri bildirim almamasıdır. En iyi çözüm, yerel sayfa yenileme davranışını taklit etmektir. Yüklenmiş görünümde, sayfa başlığını güncelleyin ve kullanıcıyı duyurun.
WAI-ARIA'nın tam özellikleri, W3 tarafından Web Erişilebilirlik Girişimi (WAI) altında HTML'nin özellikleri gibi korunur, ancak bazen yönergeler, teknik özelliklerden daha yararlı olabilir.
Web sitesini, özel erişilebilirlik işaretlemesi veya ekran okuyucu testinde fazla derinlemesine almadan daha erişilebilir hale getirecek bir web sitesi geliştirirken yapabileceğiniz birkaç basit karar vardır. HTML'nizin anlamını yapısından ilettiğinden emin olarak, ekran okuyucularının bilgileri sayfada göründüğü gibi görüntüleyebilmelerine yardımcı olacaksınız. Bu, bir ekran okuyucu ile birlikte bir büyüteç kullanan kullanıcılar için önemlidir.
Başlıklar, listeler, tablolar ve diğer öğeler için uygun HTML işaretinin kullanılması, ekran okuyucusunun, kullanıcının yapısını, kullanıcı için tanıdık bir şekilde kategorilere ayırmasına izin verir. Daha fazla ilgili düzenler için HTML5 gibi ek öğeler sağlar.
Bu tavşan deliğinden çok aşağıya doğru gittik çünkü tüm bu çalışmanın potansiyel faydalanıcıları düşündüğünüzden daha geniş bir gruptur. Bir elinizle bir mobil uygulamayı kullanmaya karar verdiyseniz, diğer eliniz bir şey taşıyorsa, bir sakatlıktan dolayı bir fare kullanmaya karar verdiyseniz, durumsal olarak devre dışı kaldınız. Ve parmaklarınız yapışkan olduğunda harika değil mi ve bir klavyeyi kullanarak muştalarınızla bir web sitesinde gezinebilirsiniz. Hepimiz maalesef hafıza kaybı, işitme, kötüleşen görme ve sınırlı hareket gibi yaşlanmaktan kaynaklanan engellere karşı duyarlıyız.
Web'in gücü evrenselliğindedir. Engellilikten bağımsız olarak herkes tarafından erişim önemli bir husustur. - Tim Berners-Lee, W3C World Wide Web'in yöneticisi ve mucidi
Öne çıkan resim, erişilebilirlik resmi Shutterstock üzerinden.