Ekibinizin çalışma sürecine erişilebilirliği nasıl dahil edeceğiniz.
Sitenizi daha erişilebilir hale getirmek, gözünüzü korkutan bir iş olabilir. Erişilebilirliğe ilk kez yaklaşıyorsanız konunun tam kapsamlı olması nereden başlayacağınızı düşünmek zorunda kalmanıza neden olabilir. Ne de olsa, çeşitli becerileri kapsamak amacıyla çalışmak, aynı şekilde, göz önünde bulundurulması gereken bir dizi sorun olduğu anlamına gelir.
Erişilebilirliğin ekip çalışması olduğunu unutmayın. Herkesin üzerine düşen bir rol vardır. Bu makalede, ana disiplinlerin (proje yöneticisi, kullanıcı deneyimi tasarımcısı ve geliştirici) her biri için kriterler özetlenmiştir. Böylece reklamverenler erişilebilirlikle ilgili en iyi uygulamaları süreçlerine dahil edebilir.
Proje yöneticisi
Her proje yöneticisinin en öncelikli hedeflerinden biri, erişilebilirlik çalışmalarını her ara hedefe dahil etmeye çalışmak, erişilebilirlik ve kullanıcı deneyimi gibi diğer konular kadar öncelikli olduğundan emin olmaktır. Aşağıda, sürecin üzerinde çalışırken göz önünde bulundurmanız gereken birkaç kontrol listesi öğesi verilmiştir.
- Erişilebilirlik eğitimini ekibe sunmak.
- Site veya uygulamadaki kritik kullanıcı yolculuklarını belirleyin.
- Ekip sürecine bir erişilebilirlik listesi dahil etmeye çalışın.
- Mümkün olduğunda, siteyi veya uygulamayı kullanıcı çalışmalarıyla değerlendirin.
Erişilebilirlik eğitimi
Web erişilebilirliği hakkında bilgi edinmek için çok sayıda harika ve ücretsiz kaynak bulunmaktadır. Ekibinize konuyu incelemeleri için zaman ayırmak, erişilebilirliği sürecin erken aşamalarına dahil etmeyi kolaylaştırabilir.
Google tarafından sağlanan bazı kaynaklar şunlardır:
Google'dan Web Erişilebilirliği: Birkaç hafta süren etkileşimli eğitim kursu.
Erişilebilirlikle İlgili Temel Bilgiler — yazılı erişilebilirlik kılavuzları ve en iyi uygulamalar.
Materyal Yönergeler: Erişilebilirlik: Kapsayıcı tasarım için kullanıcı deneyimiyle ilgili en iyi uygulamalardan oluşan bir grup.
Kritik kullanıcı yolculuklarını belirleme
Her uygulamada, kullanıcının yapması gereken birincil işlemler vardır. Örneğin, bir e-ticaret uygulaması oluşturuyorsanız her kullanıcının alışveriş sepetine bir ürün ekleyebilmesi gerekir.
Bazı işlemler ikincil öneme sahip olabilir ve belki de yalnızca zaman zaman gerçekleştirilir. Örneğin, avatar fotoğrafınızı değiştirmek güzel bir özellik olsa da her deneyim için kritik olmayabilir.
Uygulamanızdaki birincil ve ikincil işlemleri tanımlamak, erişilebilirlikle ilgili yapılacak çalışmalara öncelik vermenize yardımcı olur. Daha sonra ilerlemenizi takip etmek ve regresyonları önlemek için bu işlemleri bir erişilebilirlik kontrol listesiyle birleştirebilirsiniz.
Erişilebilirlik kontrol listesi ekleme
Erişilebilirlik konusu oldukça kapsamlıdır. Bu nedenle, göz önünde bulundurulması gereken önemli alanlardan oluşan bir kontrol listesine sahip olmak, tüm kullanıcı tabanlarınızı kapsadığınızdan emin olmanıza yardımcı olabilir.
Erişilebilirlikle ilgili çok sayıda yapılacaklar listesi vardır. Bunlardan birkaçı örnek olarak şunlar verilebilir:
WebAIM WCAG Kontrol Listesi Vox Erişilebilirlik Yönergeleri
Elinizde bir yapılacaklar listesi varken hâlâ yapılması gereken işleri önceliklendirmeye başlamak için birincil ve ikincil işlemlerinize göz atabilirsiniz. Bu süreç hakkında oldukça taktiksel hareket edebilir, hatta birincil ve ikincil eylemlerden oluşan bir matris oluşturabilir ve bu süreçlerdeki her bir adım için eksik erişilebilirlik bitleri olup olmadığını belirleyebilirsiniz.
Kullanıcı çalışmalarıyla değerlendirme
Uygulamanızı kullanmaya çalışırken gerçek kullanıcılarla bir araya gelip onları gözlemlemenin yerini hiçbir şey tutamaz. Erişilebilirliği mevcut bir deneyime entegre ediyorsanız bu süreç, iyileştirilmesi gereken alanları hızlı bir şekilde belirlemenize yardımcı olabilir. Yeni bir projeye başlıyorsanız erken kullanıcı araştırmaları, kullanımı zor olan bir özelliği geliştirmek için çok fazla zaman harcamaktan kaçınmanıza yardımcı olabilir.
Mümkün olduğunca farklı bir kullanıcı kitlesinden geri bildirim almayı hedefleyin. Çoğunlukla klavye ile gezinen veya ekran okuyucular ya da ekran büyüteçleri gibi yardımcı teknolojilerden yararlanan kullanıcıları düşünün.
UX tasarımcısı
İnsanlar tasarım yaparken genellikle kendi ön yargılarını kullanır. Engelli ve engelli iş arkadaşınız yoksa istemeden yalnızca bazı kullanıcılarınız için tasarım yapıyor olabilirsiniz. Çalışırken kendinize "bu tasarıma güvenebilecek tüm kullanıcı türleri nelerdir?" diye sorun. Süreci daha kapsayıcı hâle getirmek için deneyebileceğiniz bazı teknikleri şöyle sıralayabiliriz.
- İçerik yeterli renk kontrastına sahip.
- Sekme sırası tanımlanmıştır.
- Kontrollerde erişilebilir etiketler var.
- Kullanıcı arayüzüyle etkileşimde bulunmanın birden fazla yolu vardır.
İçeriğin iyi renk kontrastı var
Çoğu sitenin birincil hedefi, yazılı metin ya da görseller aracılığıyla kullanıcıya bazı bilgileri aktarmaktır. Bununla birlikte, bu içeriğin kontrastı düşükse bazı kullanıcıların (özellikle görme bozukluğu olanlar) okuması zor olabilir. Bu durum, müşterilerinizin kullanıcı deneyimini olumsuz yönde etkileyebilir. Bu endişeyi gidermek için tüm metin ve resimlerin yeterli renk kontrastına sahip olmasını sağlayın.
Kontrast, ön plan ve arka plan renginin parlaklığının karşılaştırılmasıyla ölçülür. Daha küçük metinler için (18 punto veya 14 punto kalın altındaki tüm metinler) minimum 4.5:1 oranı önerilir. Daha büyük metinler için bu oran 3:1'e ayarlanabilir.
Aşağıdaki resimde, sol taraftaki metin bu kontrast minimum değerlerini karşılarken sağ taraftaki metin ise düşük kontrastlıdır.
Renk kontrastını ölçmek için Google'ın Material Color Tool aracı, Lea Verou's Contrast Ratio uygulaması ve Deque'in aXe aracı gibi çeşitli araçlar vardır.
Sekme sırası tanımlandı
Sekme sırası, kullanıcı sekme tuşuna basarken öğelerin odağı aldığı sıradır. Çoğunlukla klavyeyle gezinen kullanıcılar için sekme tuşu, ekrandaki her şeye erişmenin birincil yoludur. Bunu fare imleci gibi düşünebilirsiniz.
İdeal olarak sekme sırası, okuma sırasını takip etmeli ve sayfanın en üstünden en alta doğru akmalıdır. Daha önemli öğeler daha üstte yer alacak şekilde sıralanmalıdır. Böylece, klavye kullanan herkes bu öğelere daha hızlı ulaşabilir.
Yukarıdaki örnek arayüz, sekme sırasını gösterecek şekilde numaralandırılmıştır. Bunun gibi bir taslak oluşturmak, istenen sekme sırasını belirleyerek yardımcı olabilir. Bu veriler daha sonra, düzgün bir şekilde uygulanıp test edildiğinden emin olmak için geliştiriciler ve KG test kullanıcılarıyla paylaşılabilir.
Kontrollerde erişilebilir etiketler var
Ekran okuyucu gibi yardımcı teknoloji kullanıcıları için etiketler, normalde yalnızca görsel olacak bilgiler sağlar. Örneğin, yalnızca büyüteç simgesi olan bir arama düğmesi, eksik görsel olanağı tamamlamaya yardımcı olmak için erişilebilir bir "Arama" etiketine sahip olabilir.
Erişilebilir etiketler tasarlarken uygulayabileceğiniz birkaç basit öneriyi aşağıda bulabilirsiniz:
- Kısa ve öz olun. Uzun açıklamaları dinlemek yorucu olabilir.
- Kontrol türünü veya durumunu eklememeye çalışın. Kontrol doğru şekilde kodlanmışsa ekran okuyucu bunu otomatik olarak bildirir.
- Hareket fiillerine odaklan: "Büyüteç" yerine "arama"yı kullanın.
Tüm kontrollerinizin etiketlendiği bir örnek oluşturabilirsiniz. Bu bilgiler, uygulama ve test için geliştirme ekibinizle ve KG ekibinizle paylaşılabilir.
Kullanıcı arayüzüyle etkileşimde bulunmanın ve kullanıcı arayüzünü anlamanın birden fazla yolu
Tüm kullanıcıların temel olarak fare kullanarak sayfayla etkileşime girdiğini varsaymak oldukça kolaydır. Tasarım yaparken birinin klavye kullanarak kontrolle nasıl etkileşimde bulunacağını düşünün.
Odaklanma durumlarınızı planlayın. Bu, kullanıcı sekmeyle odakladığı veya ok tuşlarına bastığında bir denetimin nasıl görüneceğini belirleme anlamına gelir. Bu durumları daha sonra tasarıma sığdırmaya çalışmak yerine, erkenden planlamakta fayda vardır.
Son olarak, herhangi bir etkileşim noktasında, kullanıcının içeriği birden çok şekilde anladığından emin olmak istersiniz. Renk körlüğü olan kullanıcılar bu bilgiyi gözden kaçırabileceğinden, bilgi aktarmak için tek başına renk kullanmamaya çalışın. Geçersiz metin alanı klasik bir örnektir. Bir sorunu belirtmek için sadece kırmızı alt çizgi kullanmak yerine, biraz yardımcı metin de ekleyebilirsiniz. Bu şekilde, daha fazla tabanı kapsar ve kullanıcının sorunu fark etme olasılığını artırırsınız.
Geliştirici
Geliştiricinin rolü, güçlü bir kullanıcı deneyimi oluşturmak için odak yönetimi ve anlam biliminin bir araya geldiği yerdir. Aşağıda, geliştiricilerin siteleri veya uygulamaları üzerinde çalışırken aklınızda bulundurabilecekleri birkaç nokta belirtilmiştir:
- Sekme sırası mantıksaldır.
- Odak düzgün şekilde yönetiliyor ve görünür durumda.
- Etkileşimli öğeler klavye desteğine sahiptir.
- ARIA rolleri ve özellikleri gerektiği şekilde uygulanır.
- Öğeler düzgün şekilde etiketlenmiş.
- Testler otomatiktir.
Mantıksal sekme sırası
input, button ve select gibi yerel öğeler için sekme sıralamasına ücretsiz olarak dahil edilir ve klavyeyle otomatik olarak odaklanabilirsiniz. Ancak tüm öğeler
aynı davranışı almaz! Özellikle div ve span gibi genel öğeler, sekme sıralamasına dahil edilmez. Bu, etkileşimli kontrol oluşturmak için bir div kullanırsanız klavyeyi erişilebilir hale getirmek için ek işlemler yapmanız gerektiği anlamına gelir.
İki seçenek vardır:
- Kontrole bir
tabindex="0"verin. Bu şekilde en azından odaklanabilirsiniz, ancak tuşlara basma desteği eklemek için muhtemelen ek işlemler yapmanız gerekir. - Mümkün olduğunda, herhangi bir düğme benzeri kontrol için
divveyaspanyerinebuttonkullanmayı düşünün. Yerelbuttonöğesinin biçimlendirilmesi çok kolaydır ve ücretsiz klavye desteği alır.
Odağı yönetme
Sayfanın içeriğini değiştirdiğinizde, odağı hareket ettirerek kullanıcının dikkatini yönlendirmek önemlidir. Bu tekniğin işe yarayabileceği durumlara örnek olarak kalıcı bir iletişim kutusu açılır. Klavye kullanan bir kullanıcı bir iletişim kutusunu açmak için bir düğmeye basarsa ve odak noktası iletişim öğesinin içine taşınmazsa, yapması gereken tek işlem, en sonunda yeni kontrolü bulana kadar sitenin tamamında sekmeyle dolaşmaktır. Görünür görünmez yeni içeriğe odaklanmayı sağlayarak bu kullanıcıların deneyimlerini daha verimli hale getirebilirsiniz.
Etkileşimli öğeler için klavye desteği
Atlı karınca veya açılır liste gibi bir özel kontrol oluşturuyorsanız klavye desteği eklemek için bazı ek çalışmalar yapmanız gerekir. ARIA Yazma Uygulamaları Kılavuzu, çeşitli kullanıcı arayüzü kalıplarını ve desteklemesi beklenen klavye işlemi türlerini tanımlayan yararlı bir kaynaktır.
Bir öğeye klavye desteği ekleme hakkında daha fazla bilgi edinmek için Google'ın Erişilebilirlikle İlgili Temel Bilgiler belgelerindeki gezin sekme dizini bölümüne göz atın.
ARIA rolleri ve özellikleri gerektiği şekilde uygulanır
Özel kontrollerin uygun klavye desteğine sahip olmasının yanı sıra
düzgün anlamlara da ihtiyacı vardır. Sonuçta div, anlam açısından yalnızca genel bir gruplandırma kapsayıcısıdır. Açılır menünüzün temeli olarak div kullanıyorsanız kontrol türünün yardımcı teknolojiye aktarılabilmesi için ek anlamlar eklemek üzere ARIA'yı kullanmanız gerekir. Burada da ARIA Yazma Uygulamaları Kılavuzu, hangi rolleri, durumları ve özellikleri kullanmanız gerektiğini belirleyerek size yardımcı olabilir.
Ek bir avantaj olarak ARIA kılavuzundaki açıklamaların çoğu örnek kodla birlikte gelir.
Öğeleri etiketleme
Yerel girişleri etiketlemek için MDN'de açıklandığı gibi yerleşik <label> öğesini kullanabilirsiniz. Bu hem ekranda görsel bir olanak oluşturmanıza yardımcı
olur hem de girişe erişilebilirlik ağacında erişilebilir bir ad verir. Daha sonra bu ad, yardımcı teknolojiler (ekran okuyucu gibi) tarafından alınır ve kullanıcıya duyurulur.
Maalesef <label>, özel denetimlere (Özel Öğeler kullanılarak veya basit div ve aralıklar kullanılarak oluşturulanlar gibi) erişilebilir bir ad verilmesini desteklemez. Bu tür kontroller için aria-label ve aria-labelledby özelliklerini kullanmanız gerekir.
Otomatik test
Tembel olmak, özellikle de test söz konusu olduğunda iyi olabilir. Her şeyi manuel olarak yapmak zorunda kalmamak için, mümkün olduğunda erişilebilirlik testlerinizi otomatikleştirmeye çalışın. Günümüzde yaygın erişilebilirlik sorunlarının kolayca ve hızla kontrol edilmesini sağlayacak çok sayıda harika test aracı bulunur:
Deque sistemleri tarafından oluşturulan aXe, Chrome uzantısı ve Düğüm modülü olarak kullanılabilir (sürekli entegrasyon ortamları için uygundur). Bu kısa A11ycast, geliştirme sürecinize AXe'i dahil etmenin birkaç farklı yolunu açıklar.
Lighthouse, Google'ın Progresif Web Uygulamalarınızın performansını denetlemeye yönelik açık kaynak projesidir. Lighthouse, PWA'nızın Service Worker ve Web Uygulaması Manifest gibi özellikleri destekleyip desteklemediğini kontrol etmenin yanı sıra, erişilebilirlik sorunlarıyla ilgili testler de dahil olmak üzere bir dizi en iyi uygulama testi çalıştırır.
Sonuç
Erişilebilirlik bir ekip çalışmasıdır. Herkesin üzerine düşen bir rol vardır. Bu kılavuzda, her ekip üyesinin konuya hızlı bir şekilde yaklaşmak ve uygulamadaki genel deneyimini iyileştirmek için kullanabileceği birkaç temel öğe sunulmaktadır.
Erişilebilirlik hakkında daha fazla bilgi edinmek için ücretsiz Udacity kursumuza göz atmayı ve web.dev'de buradaki erişilebilirlik belgelerine göz atmayı unutmayın.