Web sayfaları için erişilebilirliği iyileştirme
Bu doküman grubu, Erişilebilirlikle ilgili Udacity kursunda ele alınan içeriğin bir kısmının metne dayalı sürümüdür. Bu kursun, doğrudan videonun metne dönüştürülmesi yerine, erişilebilirlik ilkeleri ve uygulamalarının daha anlaşılır bir şekilde açıklanması ve kursun orijinal içeriğinin temel olarak kullanılması amaçlanmıştır.
Özet
- Erişilebilirliğin ne anlama geldiğini ve web geliştirmede nasıl kullanıldığını öğrenin.
- Web sitelerini herkes için erişilebilir ve kullanılabilir hale nasıl getireceğinizi öğrenin.
- Geliştirme açısından minimum düzeyde etki yaratarak temel erişilebilirliği nasıl dahil edeceğinizi öğrenin.
- Hangi HTML özelliklerinin kullanılabildiğini ve erişilebilirliği iyileştirmek için bunları nasıl kullanacağınızı öğrenin.
- Şık erişilebilirlik deneyimleri oluşturmaya yönelik gelişmiş erişilebilirlik teknikleri hakkında bilgi edinin.
Erişilebilirliği, kapsamını ve etkisini anlamak, daha iyi bir web geliştiricisi olmanızı sağlayabilir. Bu kılavuz, web sitelerinizi nasıl herkes için erişilebilir ve kullanılabilir hale getirebileceğinizi anlamanıza yardımcı olmayı amaçlamaktadır.
"Erişilebilirlik" kelimesinin yazılması zor olabilir ama tamamlanması zor olması gerekmez. Bu kılavuzda, erişilebilirliği minimum çabayla iyileştirmeye yardımcı olacak bazı kolay kazançların nasıl elde edileceğini, daha erişilebilir ve sağlam arayüzler oluşturmak için HTML'de yerleşik olarak bulunan öğeleri nasıl kullanabileceğinizi ve şık erişilebilir deneyimler oluşturmak için bazı gelişmiş tekniklerden nasıl yararlanabileceğinizi öğreneceksiniz.
Ayrıca bu tekniklerin çoğunun yalnızca engelli kullanıcılar için değil, tüm kullanıcılar için daha keyifli ve kullanımı kolay arayüzler oluşturmanıza yardımcı olacağını göreceksiniz.
Elbette birçok geliştirici erişilebilirliğin ne anlama geldiğini çok net bir şekilde anlayabiliyor. Devlet sözleşmeleri, kontrol listeleri ve ekran okuyucularla ilgili olan bu iş, öyle değil mi? Ayrıca çok sayıda yanlış kanı var. Örneğin, birçok geliştirici erişilebilirliği ele almanın kendilerini keyifli ve ilgi çekici bir deneyim oluşturma ile kullanışsız ve çirkin ama erişilebilir bir deneyim oluşturma arasında seçim yapmak zorunda bırakacağını düşünür.
Yani elbette durum böyle değil. Başka bir konuya geçmeden önce bu konuyu açıklığa kavuşturalım. Erişilebilirlik derken neyi kastediyoruz ve neyi öğrenmek istiyoruz?
Erişilebilirlik nedir?
Genel olarak, bir sitenin erişilebilir derken, site içeriğinin kullanılabilir olduğunu ve işlevselliğinin tam anlamıyla herkes tarafından kullanılabileceğini belirtiriz. Geliştiriciler olarak tüm kullanıcıların bir klavyeyi, fareyi veya dokunmatik ekranı görebildiğini ve kullanabildiğini ve sayfanızın içeriğiyle aynı şekilde etkileşimde bulunabileceğini varsaymak kolaydır. Bu, bazı kullanıcılar için iyi sonuç veren bir deneyim sağlayabilir, ancak basit rahatsızlıklardan diğerleri için engelleyici olanlara kadar çeşitli sorunlara da yol açabilir.
Bu nedenle erişilebilirlik, dar bir "Tipik" kullanıcı aralığının dışında olabilecek, şeylere beklediğinizden farklı şekilde erişebilen veya öğelerle etkileşim kurabilen kullanıcıların deneyimini ifade eder. Özellikle bir tür engel veya engel yaşayan kullanıcılarla ilgilidir ve bu deneyimin fiziksel ya da geçici olmayabileceğini unutmayın.
Örneğin, erişilebilirlik konusunu fiziksel engelleri olan kullanıcılar üzerinde yoğunlaştırırsak da hepimiz başka nedenlerle erişemeyeceğimiz bir arayüzü kullanma deneyimiyle ilgili olabiliriz. Bir masaüstü sitesini cep telefonunda kullanırken sorun yaşadığınız, "Bu içerik bölgenizde kullanılamıyor" mesajını gördüğünüz veya tablette tanıdık bir menü bulamadığınız oldu mu? Bunların hepsi erişilebilirlik sorunlarıdır.
Daha fazla bilgi edindikçe, erişilebilirlik sorunlarını bu geniş ve genel anlamda ele almanın neredeyse her zaman herkes için kullanıcı deneyimini iyileştirdiğini göreceksiniz. Bir örneğe bakalım:
Bu formda erişilebilirlikle ilgili bazı sorunlar var.
- Metin, düşük kontrastlı olduğundan görme yetisi düşük olan kullanıcıların okuması zordur.
- Etiketlerin solda ve alanların sağda bulunması, birçok kişinin bunları ilişkilendirmesini zorlaştırır ve sayfayı kullanmak için görüntüyü yakınlaştırması gereken bir kişinin bunu yapması neredeyse imkansızdır. Buna telefonda baktığını ve neyin neyin iyi olacağını anlamak üzere yatay kaydırma yapmak gerektiğini düşünün.
- "Ayrıntıları hatırlansın mı?" etiketi onay kutusuyla ilişkilendirilmez. Bu nedenle, etiketi tıklamak yerine yalnızca küçük kareye dokunmanız veya tıklamanız gerekir. Ayrıca, ekran okuyucu kullanan bir kişi, ilişkilendirmeyi bulmakta zorlanabilir.
Şimdi erişilebilirlik değnekmizi sallayalım ve bu sorunların düzeltildiği formu görelim. Metni daha koyu hale getirecek, etiketlerin etiketlendikleri öğelere yakın olmasını sağlayacak ve etiketi onay kutusuyla ilişkilendirilecek şekilde düzelteceğiz. Böylece etiketi tıklayarak da geçiş yapabilirsiniz.
Hangisini kullanmayı tercih ederdiniz? "Erişilebilir sürüm" dediyseniz bu kılavuzun ana fikrini anlama yolunda ilerliyorsunuz demektir. Çoğunlukla birkaç kullanıcıyı engelleyen bir şey diğerleri için de sorun yaratır. Bu nedenle, erişilebilirlik sorununu düzelterek deneyimi herkes için daha iyi hale getirirsiniz.
Web İçeriği Erişilebilirlik Kuralları
Bu kılavuz boyunca, "erişilebilirliğin" ne anlama geldiğini belirli bir şekilde ele almak için erişilebilirlik uzmanları tarafından bir araya getirilen bir dizi yönerge ve en iyi uygulama olan Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.0'a değineceğiz.
WCAG, genellikle POUR kısaltmasıyla çağrılan dört ilke baz alınarak düzenlenmiştir:
Algılanabilir: Kullanıcılar içeriği algılayabiliyor mu? Bu, bir şeyin görme gibi tek bir duyu yoluyla algılanabilmesinin o öğenin tüm kullanıcılar tarafından algılanabileceği anlamına gelmediğini unutmamamıza yardımcı olur.
Kullanılabilir: Kullanıcılar kullanıcı arayüzü bileşenlerini kullanabiliyor ve içerikler arasında gezinebiliyor mu? Örneğin, fareyle üzerine gelme etkileşimi gerektiren bir şey, fare veya dokunmatik ekran kullanamayan biri tarafından çalıştırılamaz.
Anlaşılır: Kullanıcılar içeriği anlayabiliyor mu? Kullanıcılar arayüzü anlayabiliyor mu ve kafa karışıklığını önleyecek kadar tutarlı mı?
Sağlam: İçerik çok çeşitli kullanıcı aracıları (tarayıcılar) tarafından kullanılabiliyor mu? Yardımcı teknolojiyle çalışıyor mu?
WCAG, içeriklere erişimin ne anlama geldiğine dair kapsamlı bir genel bakış sunsa da biraz bunaltıcı olabilir. WebAIM(Akılda Web Erişilebilirlik) grubu, bu sorunu hafifletmek için WCAG yönergelerini, özellikle web içeriklerini hedefleyen, takibi kolay bir kontrol listesi haline getirdi.
WebAIM kontrol listesi, uygulamanız için gerekenlere dair kısa, üst düzey bir özet sunabilir, aynı zamanda genişletilmiş bir tanıma ihtiyacınız varsa temel WCAG spesifikasyonuna bağlantı verebilir.
Elinizdeki bu araç sayesinde erişilebilirlik çalışmalarınız için bir yön belirleyebilir ve projeniz ana hatlarıyla belirtilen kriterleri karşıladığı sürece kullanıcılarınızın içeriğinize erişirken olumlu bir deneyim yaşayacağından emin olabilirsiniz.
Kullanıcıların çeşitliliğini anlama
Erişilebilirlik hakkında bilgi edinmek, dünyadaki farklı kullanıcı gruplarını ve onları etkileyen erişilebilirlik konuları hakkında bilgi sahibi olmanıza yardımcı olur. Daha ayrıntılı açıklamak gerekirse, Google'da Teknik Program Yöneticisi olan ve tamamen görme engelli Victor Tsaran'ın katıldığı bilgilendirici bir soru/cevap oturumuna göz atalım.
Google'da ne üzerinde çalışıyorsunuz?
Google'daki görevim, ürünlerimizin engellilik veya yetenekler fark etmeksizin tüm farklı kullanıcılarımızın hizmetine sunulmasını sağlamak.
Kullanıcılar ne tür engellere sahip?
Birisinin içeriğimize erişmesini zorlaştıracak ne tür engelleri düşündüğümüzde, pek çok kişi hemen benim gibi görme engelli bir kullanıcının aklına ilk kez gelir. Bu aksaklığın çok sayıda web sitesini kullanmayı gerçekten can sıkıcı ve hatta imkansız hale getirebildiği doğrudur.
Birçok modern web tekniği, görme engelli kullanıcıların web'e erişmek için kullandığı araçlarla düzgün çalışmayan siteler oluşturma gibi talihsiz bir yan etkiye sahiptir. Ancak erişilebilirlik açısından aslında bundan daha fazlası var. Bu yöntemin, görme bozuklukları, motor, işitme ve bilişsel olmak üzere dört farklı gruba ayrıldığı düşünülürse bu yöntemin yararlı olduğunu düşünüyoruz.
Bunları birer birer ele alalım. Görme bozukluğu örnekleri verebilir misiniz?
Görme bozuklukları birkaç kategoriye ayrılabilir: Benim gibi görme engelli kullanıcılar ekran okuyucu, braille veya bu ikisinin birleşimini kullanabilir.
Aslında tam anlamıyla hiç görmemek çok alışılmadık bir şey olsa da, tanıdığınız veya hiç görmeyecek en az bir kişiyle tanışmış olma şansınız vardır. Ancak az gören kullanıcılar arasında da çok daha fazla kullanıcı vardır.
Bu, eşim gibi kornea hastası olmayan, yani okumakta zorlanan ve yasal olarak kör olan şeyleri görebildiği halde, görme yeteneği olmayan ve çok güçlü gözlük takması gereken birine kadar geniş bir yelpazeyi kapsar.
Çok geniş bir aralık ve doğal olarak bu kategorideki kişilerin kullandığı çok çeşitli konaklama olanakları vardır: Bazıları ekran okuyucu veya Braille ekran kullanıyor (basılı metinden daha kolay görüldüğü için ekranda Braille okuyan bir kadın olduğunu bildim). Ayrıca, işletim sistemi yüksek kontrast modu, yüksek kontrastlı tarayıcı uzantısı veya web sitesi için yüksek kontrast teması gibi yüksek kontrast seçeneklerini de kullanabilirler.
Yüksek kontrast modu, tarayıcı yakınlaştırma ve metin okuma özelliklerini bir arada kullanan arkadaşım Laura gibi birçok kullanıcı da bunların bir kombinasyonunu bile kullanıyor.
Az görme, birçok kişinin bağ kurabileceği bir durumdur. Öncelikle, yaşlandıkça hepimiz görme yetisinde azalmayla karşılaşırız. Bu yüzden, bu durumu daha önce yaşamamış olsanız bile ebeveynlerinizin bundan şikayetçi olma ihtimali yüksektir. Ancak pek çok kişi dizüstü bilgisayarlarını güneşli bir pencerenin önünden dışarı çıkardıktan sonra bir anda hiçbir şey okuyamadıklarını görür. Ya da daha önce lazer ameliyatı yapmış veya belki odanın öbür ucundan bir şeyler okumak zorunda olan biri, bahsettiğim konaklama yerlerinden birini kullanmış olabilir. Bence geliştiricilerin az gören kullanıcılarla empati kurması çok kolay.
Ayrıca, renk görme yetisi zayıf olan insanlardan bahsetmeyi de unutmamalıyım. Erkeklerin yaklaşık% 9'unda renk körlüğü bulunur. Ayrıca kadınların yaklaşık% 1'i. Kırmızı ile yeşili veya sarı ile maviyi ayırt etmekte zorlanabilirler. Bir dahaki sefer form doğrulaması tasarlarken bunu düşünün.
Motor bozuklukları ne olacak?
Evet, motor bozukluklar veya ellerini kullanma engeli. Bu grup, örneğin fare kullanmamayı tercih edenlerden, belki bazı RSA ya da bir şey yaşamış ve bu durumu acı vermiş olanlardan, fiziksel olarak felç geçiren ve vücudunun belirli yerlerini hareket kabiliyeti sınırlı olan kişilere kadar uzanır.
Motor bozukluğu olan kullanıcılar bilgisayarlarıyla etkileşimde bulunmak için klavye, anahtar cihazı, ses kontrolü, hatta göz izleme cihazı kullanabilirler.
Görme bozukluklarına benzer şekilde hareket kabiliyeti de geçici veya durumsal bir sorun olabilir: Farenizin elinde bilek kırık olabilir. Dizüstü bilgisayarınızda dokunmatik yüzey bozulmuş ya da bir trende hareket ediyor olabilirsiniz. Kullanıcının hareketliliğinin kısıtlandığı birçok durum olabilir. Onlara hizmet verdiğimizden emin olarak hem kalıcı engeli olan herkes için hem de geçici olarak işaretçi tabanlı bir kullanıcı arayüzü kullanamadığını fark eden herkes için deneyimi genel anlamda iyileştiriyoruz.
Mükemmel. Şimdi işitme engellerinden bahsedelim.
Bu gruplar, işitme engellilerden duyma zorluğu çekenlere kadar çeşitlilik gösterebilir. Tıpkı görmede olduğu gibi, işitme duyumuz da yaşla birlikte bozulma eğilimindedir. Çoğumuz bize yardımcı olması için işitme cihazları gibi yaygın olanaklardan yararlanırız.
İşitme engelli kullanıcılar için sese güvenmediğimizden emin olmamız gerekir. Bu nedenle, video altyazıları ve konuşma metinleri gibi öğeleri kullandığınızdan ve ses, arayüzün parçasıysa bir tür alternatif sağladığınızdan emin olmamız gerekir.
Görme ve motor bozukluklarında gördüğümüz gibi, kulakları düzgün çalışan birinin de bu konaklama özelliklerinden yararlanabileceği bir durum hayal etmek çok kolay. Pek çok arkadaşım, videolarda altyazı ve konuşma metinlerinin bulunmasını çok beğendiklerini söylüyor. Çünkü, açık plan ofiste kulaklıkları olmasa bile videoyu izleyebilirler!
Pekala, biraz bilişsel engellilikten bahsedebilir misin?
DEB, Disleksi ve Otizm gibi bir dizi bilişsel durum vardır. Bu gruplarda konaklama imkanları doğal olarak son derece çeşitlidir ancak okumayı veya konsantrasyonu kolaylaştırmak için yakınlaştırma işlevini kullanmak gibi diğer alanlarla örtüştüğünü düşünüyoruz. Ayrıca bu kullanıcılar, dikkat dağıtıcı unsurları ve bilişsel yükü en aza indirdiği için aslında minimal tasarımın en iyi sonucu verdiğini görebilirler.
Bence herkes, bilişsel aşırı yüklenmenin stresle bağdaştırabilir. Bu nedenle, bilişsel bozukluğu olan birinin işine yarayan bir şey oluşturursak herkes için hoş deneyim olacak bir şey yaratmış olacağımız açıktır.
Peki erişilebilirlik hakkındaki düşüncelerinizi nasıl özetlersiniz?
İnsanların sahip olabileceği çok sayıda beceri ve engele baktığınızda, yalnızca mükemmel görüş, işitme, el becerisi ve bilişsel becerileri olan kişiler için ürün tasarlamanın ve geliştirmenin son derece dar göründüğünü fark edebilirsiniz. Herkes için daha stresli ve daha az kullanılabilir bir deneyim oluşturuyoruz. Bazı kullanıcılar içinse aslında kendilerini tamamen dışlayan bir deneyim oluşturuyoruz.
Bu röportajda Victor, çeşitli engeller belirledi ve bunları görsel, motor, işitme ve bilişsel olmak üzere dört geniş kategoriye ayırdı. Bozuklukların her birinin duruma bağlı, geçici veya kalıcı olabileceğini de belirtti.
Erişim engelinin gerçek hayattan bazı örneklerine göz atalım ve bu kategori ve türlerin hangi noktalarda yer aldığını inceleyelim. Bazı bozuklukların birden fazla kategori veya türe girebileceğini unutmayın.
| Durumsal | Geçici | Kalıcı | |
|---|---|---|---|
| Görsel | beyin sarsıntısı | körlük | |
| Motor | bebek tutma | bozuk kol, RSI* | RSI* |
| İşitme | gürültülü ofis | ||
| Bilişsel | beyin sarsıntısı |
Tekrarlayan kas yaralanması: ör. karpal tünel sendromu, tenis dirseği, tetik parmak
Sonraki adımlar
Zaten epey konuyu ele aldık. Şunun hakkında bilgi 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ürleri
Kılavuzun geri kalanında, erişilebilir web siteleri oluşturmanın pratik yönlerini inceleyeceğiz. Bu çalışmayı üç ana konu etrafında düzenleyeceğiz:
Odak: Fare yerine klavyeyle çalıştırılabilecek öğelerin nasıl geliştirileceğine göz atacağız. Bu, motor bozukluğu olan kullanıcılar için elbette önemlidir ancak kullanıcı arayüzünüzün tüm kullanıcılar için iyi durumda olmasını da sağlar.
Semantik: Kullanıcı arayüzümüzü çeşitli yardımcı teknolojilerle çalışan sağlam bir şekilde ifade ettiğimizden emin olacağız.
Stil: Görsel tasarımı ele alacak ve arayüzün görsel öğelerini mümkün olduğunca esnek ve kullanılabilir hale getirmeye yönelik bazı tekniklere göz atacağız.
Bu konulardan her biri tüm kursu kapsadığından erişilebilir web siteleri oluşturma konusunu her açıdan ele almayacağız. Ancak, başlamanız için size yeterli bilgi vereceğiz ve sizi her konu hakkında daha fazla bilgi edinebileceğiniz bazı güzel yerlere yönlendireceğiz.