Erişilebilirlik

Web sayfalarının erişilebilirliğini iyileştirme

Alice Boxhall

Dave Gash

Meggin Kearney

Rob Dodson

Bu doküman kümesi, Udacity kursu açık Erişilebilirlik. Kursun doğrudan bir transkriptinden ziyade, eğitime katılanların erişilebilirlik ilkeleri ve uygulamalarının hızlıca ele alınmasının yanı sıra, temel olarak kullanabilirsiniz.

Özet

• Erişilebilirliğin ne anlama geldiğini ve web geliştirmenize nasıl uygulandığını öğrenin.
• Web sitelerini herkes için erişilebilir ve kullanılabilir hale getirme hakkında bilgi edinin.
• Geliştirme aşamasını minimum düzeyde etkileyerek temel erişilebilirliği nasıl ekleyeceğinizi öğrenin.
• Hangi HTML özelliklerinin kullanılabildiğini ve bunları iyileştirmek için nasıl kullanacağınızı öğrenin erişilebilirlik.
• Şık reklamlar oluşturmak için gelişmiş erişilebilirlik teknikleri hakkında bilgi edinin erişilebilirlik deneyimleri.

Erişilebilirliği, kapsamını ve etkisini anlamak sizi daha iyi bir web haline getirebilir geliştiriciyim. Bu kılavuzun amacı, verilerinizi en iyi şekilde değerlendirmek için web sitelerini herkes için erişilebilir ve kullanılabilir hale getirebilirsiniz.

"Erişilebilirlik" yazımı zor olabilir, ancak zor olması gerekmez yardımcı olur. Bu kılavuzda, başarılı olmanıza yardımcı olacak bazı kolay kazançları yerleşik olarak bulunan şeyleri nasıl kullanabileceğinizi, hem de daha erişilebilir ve sağlam arayüzler oluşturmak için kullanabileceğiniz HTML ve ve erişilebilir deneyimler oluşturmaya yönelik gelişmiş teknikler üzerinde çalışıyorum.

Ayrıca, bu tekniklerin çoğunun arayüzler oluşturmanıza yardımcı olacağını hem tüm kullanıcılar için daha keyifli ve kullanımı kolay engeller.

Elbette birçok geliştirici, erişilebilirliğin ne olduğu konusunda resmi sözleşmeler, kontrol listeleri ve ekranlarla ilgili bir şey okuyucular, değil mi? birçok yanlış kanı var. Örneğin, birçok geliştirici, erişilebilirliği ele almanın kendilerini deneyim oluşturma ile ilgi çekici ve eğlenceli bir deneyim kullanışsız ve çirkin ama erişilebilir bir hale geliyor.

Tabii ki durum hiç böyle değil. Konuya geçmeden önce bunu net bir şekilde devreye girer. Erişilebilirlik derken neyi kastediyoruz ve neyi hedefliyoruz? neler öğreniyorsunuz?

Erişilebilirlik nedir?

Genel olarak, bir siteye erişilebilir dediğimizde, o sitenin erişilebilirliği kullanılabilir ve işlevselliği ile gerçek anlamda kullanılabilir. herkes. Geliştiriciler olarak, tüm kullanıcıların bir web sitesini görüp kullanamayacağını ve veya dokunmatik ekran kullanabilir ve sayfa içeriğinizle etkileşime girebilir. olduğu gibidir. Bu da bazı insanlar için iyi sonuç veren bir deneyimle sonuçlanabilir. ancak bazen basit can sıkıcılıklardan bazı sorunların diğerleri.

Erişilebilirlik ise, kapsam dışında olabilecek kullanıcıların dar bir "normal" aralığı veya öğelerle etkileşimde bulunabilecek kullanıcı farklı işlemler yapmanız gerekir. Daha ayrıntılı olarak belirtmek gerekirse, veya engellilik durumu söz konusuysa dikkat edin ve bu durumun fiziksel veya geçici olabilir.

Örneğin, erişilebilirlik konusunun merkezinde kullanıcılar fiziksel bozuklukları olan durumlarda, fiziksel engelleri olan yeni bir arayüze sahip olmayabilir. Hiç bir masaüstü sitesini cep telefonundan kullanma sorunu ya da "Bu içerik, bölgenizde kullanılamıyor" veya tanıdık bir menü bulamadıysanız tablette mi? Bunların hepsi erişilebilirlik sorunları.

Daha fazla bilgi edindikçe erişilebilirlik sorunlarını ele almanın daha genel anlamlarda olmak neredeyse her zaman kullanıcı deneyimini . Bunu bir örnek üzerinde inceleyelim:

Bu formda bazı erişilebilirlik sorunları var.

• Metin, düşük kontrastlı ve az gören kullanıcılar tarafından kolayca okunamıyor.
• Etiketlerin sol, sağ tarafta ise alanlar, birçok şirket için bunları ilişkilendirmesini sağlar. Yakınlaştırılması gereken kişilerin ise inceleyebilirsiniz. buna telefonda baktığınızı ve yatay olarak kaydırmak zorunda olduğunuzu hayal edin nelerin iyi gittiğini anlamaya çalışın.
• "Ayrıntıları hatırlıyor musunuz?" etiketi onay kutusuyla ilişkilendirilmez, bu nedenle etiketi tıklamak yerine sadece küçük kareye dokunun veya tıklayın; ekran okuyucu kullanan bir kişi de onu anlamakta ilişkilendirmesine yardımcı olur.

Şimdi erişilebilirlik çubuğumuzu sallayıp bu sorunların düzeltildiği formu inceleyelim. Metni koyulaştırıp tasarımı, etiketlerin tam ekran etiketleyebilir ve ilişkilendirilecek etiketi sabitleyerek, onay kutusunu işaretleyin. Böylece, etiketi tıklayarak da geçiş yapabilirsiniz.

Hangisini kullanmayı tercih ederdiniz? "Erişilebilir sürüm" dediyseniz ana fikrini anlamaya çalışacağız. Çoğunlukla çoğu kullanıcı için bir sorun teşkil ettiğinden bu uygulamaları erişilebilirlik sorununu düzeltir ve herkes için deneyimi iyileştirir.

Web İçeriği Erişilebilirlik Kuralları

Bu kılavuzda, Web İçeriği Erişilebilirlik Kuralları'ndan (WCAG) 2.0, bir dizi yönerge kullanıcıların ihtiyaçlarını karşılamak üzere erişilebilirlik uzmanları tarafından derlenen en iyi uygulamalar "erişilebilirlik" metodik bir şekilde anlamalarını sağlar.

WCAG, genellikle POUR kısaltmasıyla anılan dört ilke baz alınarak düzenlenmiştir:

• Algılanabilir: Kullanıcılar içeriği algılayabiliyor mu? Bu, müşteri yolculuğunun Sadece bir duyuyla algılanabilir olması gerekir. bu, tüm kullanıcıların onu algılayabileceği anlamına gelmez.

• Kullanılabilir: Kullanıcılar kullanıcı arayüzü bileşenlerini kullanabiliyor ve içerikte gezinebiliyor mu? Örneğin, Örneğin, fareyle üzerine gelme etkileşimi gerektiren bir öğe, Google fare veya dokunmatik ekran kullanamayan bir kişiye ihtiyaç duyabilir.

• Anlaşılır: Kullanıcılar içeriği anlayabiliyor mu? Kullanıcılar anlayabiliyor mu? ve kafa karışıklığını önleyecek kadar tutarlı mı?

• Robust: İçerik çok çeşitli kullanıcı aracıları tarafından tüketilebilir mi (tarayıcılarda)? Yardımcı teknolojilerle çalışıyor mu?

WCAG, bir içerikte yer alması gereken içeriklerin çok da yorucu olabiliyor. Riskleri azaltmak amacıyla WebAIM(Akılda Web Erişilebilirliği) grubu WCAG yönergelerini takip etmesi kolay bir yapılacaklar listesi haline getirdi. web içerikleri için de geçerlidir.

WebAIM kontrol listesi uygulamanız gerekenlerin kısa ve genel bir özetini sunabilir. Aynı zamanda, genişletilmiş bir WCAG spesifikasyonuna ihtiyacınız varsa belirler.

Bu aracı kullandığınızda, erişilebilirlik çalışmalarınız için bir yön çizebilirsiniz ve projeniz belirlenen kriterleri karşıladığı sürece, Kullanıcıların içeriğinize erişirken olumlu bir deneyim yaşamaları gerekir.

Kullanıcıların çeşitlilik

Erişilebilirlikle ilgili bilgi edinirken, erişilebilirliğinizi anlamak, dünyanın dört bir yanındaki farklı kullanıcılara ve Android'deki onları nasıl etkilediğiniz. Daha ayrıntılı açıklamak gerekirse bilgilendirici bir soru-cevap oturumu sunuyoruz tamamen kör olan Victor Tsaran ile konuştuk.

Google'da hangi alanda çalışıyorsunuz?

Google'da görevim, ürünlerimizin tüm çalışanlarımız için uygun olmasını sağlamak. engel ve yetenekli olup olmadıklarına bakılmaksızın çeşitlilik içeren kullanıcıları ifade eder.

Kullanıcıların ne tür engelleri var?

Ekibin çalışmasını zorlaştıracak ya da erişimi kolaylaşır. Pek çok kişi, gözüyle görmedikleri bir kullanıcıyı hoşuma gidiyor. Bu durumun daha da sinir bozucu olabileceği çok fazla web sitesini kullanmamız imkansızdır.

Birçok modern web tekniğinin, yeni web sitesi tasarımı erişmek için kullandığı araçları iyi çalışmayan sitelerle yardımcı olur. Ancak erişilebilirlik ise bundan çok daha fazlasını içeriyor. Bulduk bozuklukları dört genel gruba ayırabiliriz: görsel, motor, işitme ve bilişsel olduğunda.

Bunları birer birer inceleyelim. Görme bozukluklarıyla ilgili birkaç örnek verebilir misiniz?

Görme bozuklukları birkaç kategoriye ayrılabilir: Görme engelli kullanıcılar, ekran okuyucu, Braille veya bu ikisinin kombinasyonunu kullanabilir.

Gerçekten hiçbir vizyona sahip olmamanız alışılmadık bir durum olsa da dikkatinizi çeken en az bir kişiyle tanışmış olma ihtimaliniz yüksektir. Tümü'ne dokunun. Ancak az görme dediğimiz kişilerin sayısı da çok daha fazla. yardımcı olur.

Bu geniş bir yelpazede, kornea hastası eşim gibi, kornea hastası olmayan biri de var. Yani, basılı metinleri okumakta zorlandığı şeyleri görebiliyor. veya yasal olarak kör olarak kabul ediliyor. görme ve çok güçlü reçeteli gözlük takması gerektiği anlamına gelir.

Uçsuz bucaksız bir yer var ve doğal olarak konaklama için de çok fazla yer var bu kategorideki kişilerin kullandığı: bazıları ekran okuyucu veya Braille ( Braille okuyan ve ekranda Braille okuyan bir kadını bile duydum. yazılı metinlere kıyasla daha kolay göründüğünden) veya metin okumayı kullanıyor olabilirler tam ekran okuyucu işlevlerine sahip değiller ya da ekranın bir bölümünü yakınlaştıran ekran büyüteci veya yalnızca büyüttük. Ayrıca İşletim sistemi yüksek kontrast modu, Yüksek kontrastlı tarayıcı uzantısı veya web sitesi için yüksek kontrastlı tema.

Birçok kullanıcı bunların bir kombinasyonunu bile kullanıyor. Örneğin, yüksek kontrast modu, tarayıcı yakınlaştırma ve metin okuma özelliğinin birleşiminden oluşur.

Az görme, birçok kişinin ilişkilendirebileceği bir durumdur. Başlangıç olarak hepimiz yaşla birlikte görme kaybı yaşamazsınız. anne veya babanızın bu durumdan şikayet ettiğini duymuşsunuzdur. Ancak birçok dizüstü bilgisayarlarını güneşli bir pencerenin önünden çıkarmanın hayal kırıklığını yaşayan insanlar ama aniden hiçbir şey okuyamazlar. Ya da lazer yaptıran herkes ya da odanın diğer ucundan bir şeyler okuması gerekse bile bu konaklama yerlerinden biri. Bence bir paydaşa az gören kullanıcılara empatiyle yaklaşmaları gerektiğini unutmayın.

Ayrıca, renkleri kötü gören insanlardan bahsetmeyi de unutmam gerekir. erkeklerin yaklaşık% 9'unda bir tür renk körlüğü var. Ayrıca yardımcı olur. Kırmızı ve yeşil ya da sarı ve maviyi ayırt etmekte zorlanabilirler. Bir dahaki sefere form doğrulamasını tasarlarken bunu düşünün.

Motor engelliler ne olacak?

Evet, bedensel engeller veya ellerini kullanma engeli var. Bu grup tamamen aralıklı bazıları için bu gerçekten çok değerlidir, çünkü Fiziksel olarak felç geçirmiş olabilecek birinin acı çekmesine neden olabilir. Vücudunun belirli bölgelerinde hareket kabiliyeti kısıtlıdır.

Hareket engelli kullanıcılar klavye kullanabilir, cihaz değiştirebilir, sesli kontrol hatta bilgisayarla etkileşimde bulunmak için bir göz izleme cihazı kullanır.

Görme bozukluklarına benzer şekilde hareket de geçici veya durumsal olabilir. sorun: Belki farenizin elinde kırık bir bileğiniz vardır. Dokunmatik yüzey ya da titrek bir trene biniyorsunuz. Bir mobilitenin engellendiği birçok durum olduğunu ve onlara yardımcı olmak için, hem genel anlamda deneyimi iyileştiriyoruz hem de aynı zamanda geçici olarak düzeltemeyeceğini düşünen kişiler için de işaretçi tabanlı bir kullanıcı arayüzü kullanabilirsiniz.

Mükemmel. Biraz da işitme bozukluğundan bahsedelim.

Bu gruplar çok işitme engelli veya duyma zorluğu çekenlere kadar değişiklik gösterebilir. Ve Görme yetisi gibi, işitme duyumuz da yaşla birlikte azalabilir. Birçoğumuz yaygın olarak işitme cihazları gibi her türlü donanım ve

İşitme engelli kullanıcılarda, herhangi bir engeli Bu yüzden video altyazıları ve konuşma metni gibi öğeler kullandığınızdan emin olun. ses arayüzün parçasıysa bir tür alternatif sunmak.

Görme ve bedensel engellerde de gördüğümüz gibi bu tür engelleri kulakları iyi çalışan birisinin bu teknolojiden fayda sağlayacağı konaklama imkanı da geliyor. Birçok arkadaşım, videolarda uzun zamandır çünkü açık planlı bir ofiste çalışıyorlarsa olmadan videoyu izlemeye devam edebilirler.

Peki, bize bilişsel engellerden bahsedebilir misin?

DEB, Disleksi ve Otizm gibi çeşitli bilişsel sorunlar vardır. Bu da kullanıcıların farklı şekilde erişmek istediği veya farklı şekilde erişmek istediği anlamına gelebilir. İlgili içeriği oluşturmak için kullanılan Bu gruplar için konaklama seçenekleri doğal olarak son derece çeşitli, ancak başka alanlarla çakıştığını söyleyebiliriz (örneğin, çözmek için yakınlaştırma okumayı ve konsantre olmayı kolaylaştırır. Ayrıca bu kullanıcılar, Dikkat dağıtıcı unsurları ve bilişsel yükü en aza indirdiği için minimal tasarım en iyi sonucu verir.

Bence herkes, bilişsel aşırı yüklemenin stresiyle ilişkilendirilebilir. ve bilişsel becerileri olan birine uygun bir şey yaratırsak hem onlar için hem kullanıcıları hem de herkes için herkese hitap eden bir deneyim.

Peki, erişilebilirlik hakkındaki düşüncelerinizi nasıl özetlersiniz?

İnsanların farklı becerilere ve engellere sahip oldukları ürünler tasarlamanın ve geliştirirken yalnızca onları satın almış görme, işitme, el becerileri ve bilişsellik son derece dar görünüyor. Bu bir aşamadır çünkü her noktada daha stresli ve daha az herkes için kullanılabilir bir deneyim oluşturuyor ve bazı kullanıcılar için bunları tamamen hariç tutar.

Bu röportajda Victor, bir dizi engel tespit etti ve bu engelleri görsel, motor, işitme ve bilişsel olmak üzere dört genel kategoriye ayrılır. O ve engellilik türlerinin her birinin duruma bağlı olabileceğini, geçici veya kalıcı.

Şimdi gerçek hayattan erişim engelleri örneklerine bakalım ve ve bunların hangi türlerde bulunduğunu gösterir. Bazı engellerin birden fazla kategoriye veya türe karşılık gelebilir.

Tekrarlayan Zedelenme Yaralanması: ör. karpal tünel sendromu, tenisçi dirseği, tetik parmak

Sonraki adımlar

Pek çok konuya değindik. Şunu okudunuz:

• Erişilebilirliğin ne olduğu ve herkes için neden önemli olduğu
• WCAG ve WebAIM erişilebilirlik kontrol listesi
• göz önünde bulundurmanız gereken farklı bozukluk türlerini

Kılavuzun geri kalanında, etkili bir proje oluşturmak için erişilebilir hale gelir. Bu çalışmayı üç ana konu etrafında düzenleyeceğiz alanlar:

• Odak: Nasıl yapıldığını öğreneceğiz. fare yerine klavyeyle çalıştırılabilen şeyler üretmek. Bu motor bozuklukları olan kullanıcılar için elbette önemlidir, ancak iyi durumda olduğundan emin olun.

• Anlamlar: Bir kullanıcı arayüzümüzü uyumlu bir şekilde ifade ettiğimizden emin olmak için çeşitli yardımcı teknolojilerden yararlanabilirsiniz.

• Stil: Görsel unsurları dikkate alırız görsel öğelerini tasarlamaya ve oluşturmaya yönelik arayüzü olabildiğince esnek ve kullanışlı hale getirmekti.

Bu konuların her biri tüm bir kursu doldurabilir, bu nedenle her yönüyle erişilebilir web siteleri oluşturmak üzerine konuştuk. Ancak bu durumda, ve sizi nelerin başarılı olabileceğiyle ilgili daha fazla bilgi edinebileceğiniz her konuyu ele alalım.