Ekipler için erişilebilirlik

Erişilebilirliği ekibinizin sürecine dahil etme.

Rob Dodson

Sitenizi daha erişilebilir hale getirmek zor bir iş olabilir. Erişilebilirlik konusuna ilk kez yaklaşıyorsanız konunun genişliği nedeniyle nereden başlayacağınızı bilemeyebilirsiniz. Sonuçta, çeşitli yeteneklere uyum sağlamak için çalışmak, buna karşılık olarak dikkate alınması gereken çeşitli sorunlar olduğu anlamına gelir.

Erişilebilirliğin bir ekip çalışması olduğunu unutmayın. Her kişinin üstleneceği bir rol vardır. Bu makalede, erişilebilirlik en iyi uygulamalarını süreçlerine dahil etmek için çalışabilmeleri amacıyla ana disiplinlerin (proje yöneticisi, kullanıcı deneyimi tasarımcısı ve geliştirici) her biri için ölçütler açıklanmaktadır.

Proje yöneticisi

Her proje yöneticisinin birincil hedefi, erişilebilirlik çalışmalarını her aşamaya dahil etmeye çalışmaktır. Bu çalışmalara performans ve kullanıcı deneyimi gibi diğer konularla aynı önceliği vermelidir. Aşağıda, işleminizde çalışırken göz önünde bulundurmanız gereken birkaç yapılacaklar listesi öğesi verilmiştir.

• Erişilebilirlik eğitimini ekibe sunun.
• Site veya uygulamadaki kritik kullanıcı yolculuklarını belirleyin.
• Erişilebilirlik yapılacaklar listesini ekip sürecine dahil etmeyi deneyin.
• Mümkün olduğunda siteyi veya uygulamayı kullanıcı araştırmalarıyla değerlendirin.

Erişilebilirlik eğitimi

Web erişilebilirliği hakkında bilgi edinmek için kullanabileceğiniz birçok ücretsiz kaynak vardır. Ekibinizin konuyu incelemesi için zaman ayırmak, erişilebilirliği sürecin erken safhalarında dahil etmeyi kolaylaştırabilir.

Google tarafından sağlanan bazı kaynaklar şunlardır:

Google'dan Web Erişilebilirliği: Çok haftalık etkileşimli bir eğitim kursu.

Erişilebilirlik ile İlgili Temel Bilgiler: Erişilebilirlik kılavuzları ve en iyi uygulamalar.

Materyal Yönergeleri: Erişilebilirlik: Kapsayıcı tasarım için kullanıcı deneyimi en iyi uygulamaları.

Kritik kullanıcı yolculuklarını belirleme

Her uygulamanın, kullanıcının yapması gereken bazı birincil işlemleri vardır. Örneğin, bir e-ticaret uygulaması geliştiriyorsanız her kullanıcının alışveriş sepetine öğe ekleyebilmesi gerekir.

Bazı işlemler ikincil öneme sahip olabilir ve yalnızca ara sıra gerçekleştirilebilir. Ö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 belirlemek, yapacağınız erişilebilirlik çalışmalarına öncelik vermenize yardımcı olur. İlerleme durumunuzu takip etmek ve gerilemelerden kaçınmak için bu işlemleri daha sonra erişilebilirlik yapılacaklar listesiyle birleştirebilirsiniz.

Erişilebilirlik yapılacaklar listesi ekleme

Erişilebilirlik konusu oldukça geniştir. Bu nedenle, dikkate alınması gereken önemli alanların bir listesini oluşturmak, tüm temel noktaları kapsadığınızdan emin olmanıza yardımcı olabilir.

Erişilebilirlikle ilgili birçok yapılacaklar listesi vardır. Sektöre yönelik birkaç örnek aşağıda verilmiştir:

WebAIM WCAG Kontrol Listesi Vox Erişilebilirlik Kuralları

Elinizde bir yapılacaklar listesi varken, yapılması gereken işleri önceliklendirmeye başlamak için birincil ve ikincil işlemlerinize göz atabilirsiniz. Bu süreç konusunda oldukça taktiksel davranabilir ve hatta birincil ve ikincil işlemlerden oluşan bir matris oluşturabilir, bu süreçlerdeki her adımda erişilebilirlik öğelerinin eksik olup olmadığını belirleyebilirsiniz.

Kullanıcı çalışmalarıyla değerlendirme

Gerçek kullanıcılarla oturup uygulamanızı kullanmaya çalışırken onları gözlemlemek kadar iyi bir yöntem yoktur. Mevcut bir deneyime erişilebilirlik özelliklerini sonradan ekleyecekseniz bu süreç, iyileştirme yapılması gereken alanları hızlı bir şekilde belirlemenize yardımcı olabilir. Yeni bir projeye başlıyorsanız erken kullanıcı çalışmaları, kullanımı zor bir özellik geliştirmek için çok fazla zaman harcamaktan kaçınmanıza yardımcı olabilir.

Mümkün olduğunca çeşitli kullanıcı gruplarından geri bildirim almayı hedefleyin. Özellikle klavyeyle gezinen veya ekran okuyucu ya da ekran büyüteç gibi yardımcı teknolojilerden yararlanan kullanıcıları göz önünde bulundurun.

Kullanıcı deneyimi tasarımcısı

İnsanlar tasarım yaparken kendi önyargılarını kullanabildiğinden, engelli değilseniz ve engelli iş arkadaşlarınız yoksa istemeden yalnızca bazı kullanıcılarınız için tasarım yapıyor olabilirsiniz. Çalışmanız sırasında kendinize "Bu tasarımdan yararlanabilecek tüm kullanıcı türleri nelerdir?" sorusunu sorun. Süreci daha kapsayıcı hale getirmek için deneyebilirsiniz bazı teknikleri aşağıda bulabilirsiniz.

• İçerikte yeterli renk kontrastı olmalıdır.
• Sekme sırası tanımlanır.
• Kontroller erişilebilir etiketlere sahiptir.
• Kullanıcı arayüzüyle etkileşime geçmenin birden fazla yolu vardır.

İçerikte iyi bir renk kontrastı olmalıdır.

Çoğu sitenin birincil amacı, yazılı metin veya görseller aracılığıyla kullanıcıya bilgi aktarmaktır. Ancak bu içerik düşük kontrastlıysa bazı kullanıcıların (özellikle görme engelli kullanıcıların) okuması zor olabilir. Bu durum, kullanıcı deneyimini olumsuz yönde etkileyebilir. Bu sorunu gidermek için tüm metin ve resimlerde yeterli renk kontrastı olmasını sağlayın.

Kontrast, ön plan ve arka plan renginin parlaklık değeri karşılaştırılarak ölçülür. Daha küçük metinler (18 punto veya 14 punto kalın altındaki karakterler) için minimum 4,5:1 oranı önerilir. Daha büyük metinler için bu oran 3:1 olarak ayarlanabilir.

Aşağıdaki resimde, sol taraftaki metin bu minimum kontrast değerlerini karşılarken sağ taraftaki metin düşük kontrastlıdır.

Renk kontrastını ölçmek için Google'ın Materyal Renk Aracı, Lea Verou'nun Kontrast Oranı uygulaması ve Deque'nin aXe gibi çeşitli araçlar vardır.

Sekme sırası tanımlanmıştır

Sekme sırası, kullanıcı sekme tuşuna bastığında öğelerin odaklanacağı sıradır. Klavyeyle gezinen kullanıcılar, ekrandaki her şeye ulaşmak için sekme tuşunu kullanır. Bunu, kullanıcıların fare imleci gibi düşünün.

İdeal olarak sekme sırası, okuma sırasını takip etmeli ve sayfanın üst kısmından alt kısmına doğru akmalıdır. Daha önemli öğeler, sırada daha üstte görünmelidir. Bu sayede, klavye kullanan herkes bu öğelere hızlıca ulaşabilir.

Yukarıdaki örnek arayüzde, sekme sırasını göstermek için numaralandırma yapılmıştır. Bu gibi bir taslak oluşturmak, amaçlanan sekme sırasını belirlemenize yardımcı olabilir. Bu doküman, doğru şekilde uygulandığından ve test edildiğinden emin olmak için geliştiricilerle ve kalite güvencesi test uzmanlarıyla paylaşılabilir.

Kontroller erişilebilir etiketlere sahip

Ekran okuyucu gibi yardımcı teknolojileri kullananlar için etiketler, aksi takdirde yalnızca görsel olarak sağlanacak bilgileri sağlar. Örneğin, yalnızca büyüteç simgesi olan bir arama düğmesinde, eksik görsel fırsatı tamamlamaya yardımcı olmak için erişilebilir bir "Arama" etiketi bulunabilir.

Erişilebilir etiketler tasarlarken dikkate almanız gereken birkaç basit öneriyi aşağıda bulabilirsiniz:

• Özet bir açıklama yazın. Uzun açıklamaları dinlemek sıkıcı olabilir.
• Kontrol türünü veya durumunu eklememeye çalışın. Kontrol düzgün şekilde kodlanmışsa ekran okuyucu bunu otomatik olarak duyurur.
• Eyleme yönelik fiillere odaklanın: "Büyüteç" yerine "arama"yı kullanın.

Tüm kontrollerinizin etiketlendiği bir taslak oluşturabilirsiniz. Bu, uygulama ve test için geliştirme ekibinizle ve KG ekibinizle paylaşılabilir.

Kullanıcı arayüzüyle etkileşime geçmenin ve kullanıcı arayüzünü anlamanın birden fazla yolu

Tüm kullanıcıların sayfayla etkileşime geçmek için öncelikle fare kullandığını varsaymak kolaydır. Tasarım yaparken, kullanıcıların klavye kullanarak bir kontrolle nasıl etkileşime geçeceğini göz önünde bulundurun.

Odaklanma durumlarınızı planlayın. Bu, kullanıcı sekme tuşuyla bir kontrole odaklandığında veya ok tuşlarına bastığında kontrolün nasıl görüneceğini belirleme anlamına gelir. Bu durumları daha sonra tasarıma eklemeye çalışmak yerine erkenden planlamak faydalıdır.

Son olarak, herhangi bir etkileşim noktasında kullanıcının içeriği anlamanın birden fazla yoluna sahip olduğundan emin olmak istersiniz. Bu ince ipuçları, renk körlüğü olan bir kullanıcı tarafından gözden kaçırılabileceğinden, bilgi vermek için yalnızca renkleri kullanmamaya çalışın. Geçersiz metin alanı buna klasik bir örnektir. Bir sorunu belirtmek için yalnızca kırmızı altı çizili metin yerine yardımcı metin de ekleyebilirsiniz. Böylece daha fazla kullanıcıya ulaşabilir ve kullanıcıların sorunu fark etme olasılığını artırabilirsiniz.

Geliştirici

Geliştiricinin rolü, odak yönetimi ve anlambilimin birleşerek güçlü bir kullanıcı deneyimi oluşturmasıdır. Geliştiricilerin site veya uygulamalarında çalışırken göz önünde bulundurabileceği birkaç nokta aşağıda verilmiştir:

• Sekme sırası mantıklı olmalıdır.
• Odak doğru şekilde yönetilmeli ve görünür olmalıdır.
• Etkileşimli öğeler klavye desteğine sahiptir.
• ARIA rolleri ve özellikleri gerektiği şekilde uygulanır.
• Öğeler doğru şekilde etiketlenmiştir.
• Test otomatiktir.

Mantıksal sekme sıralaması

input, button ve select gibi yerel öğeler, sekme sırasına ücretsiz olarak dahil edilir ve klavyeyle otomatik olarak odaklanılabilir. Ancak tüm öğeler bu davranışı göstermez. Özellikle div ve span gibi genel öğeler sekme sırasına dahil edilmez. Bu nedenle, etkileşimli bir denetim oluşturmak için div kullanıyorsanız bu denetimi klavyeden erişilebilir hale getirmek için ek işlem yapmanız gerekir.

İki seçenek vardır:

• Kontrole bir tabindex="0" verin. Bu işlem, en azından öğenin odaklanılabilir olmasını sağlar ancak tuş basmalarına destek eklemek için muhtemelen ek çalışma yapmanız gerekir.
• Mümkün olduğunda, düğmeye benzer kontroller için div veya span yerine button kullanmayı düşünün. Yerel button öğesinin stili çok kolay ayarlanır ve ücretsiz olarak klavye desteği alır.

Odağı yönetme

Sayfanın içeriğini değiştirdiğinizde, odağı değiştirerek kullanıcının dikkatini yönlendirmek önemlidir. Bu tekniğin yararlı olduğu klasik bir örnek, modal iletişim kutusu açmaktır. Klavye kullanan bir kullanıcı, iletişim kutusunu açmak için bir düğmeye bastığında ve odak iletişim kutusu öğesine taşınmazsa tek seçeneği, yeni denetimi bulana kadar sitenin tamamını sekme tuşuyla taramaktır. Odak noktasını yeni içerik göründüğü anda yeni içeriğe taşıyarak bu kullanıcıların deneyimlerinin verimliliğini artırabilirsiniz.

Etkileşimli öğeler için klavye desteği

Bant veya açılır liste gibi özel bir kontrol oluşturuyorsanız klavye desteği eklemek için ek çalışmalar yapmanız gerekir. ARIA Yazarlık Uygulamaları Kılavuzu, çeşitli kullanıcı arayüzü kalıplarını ve bu kalıpların desteklemesi beklenen klavye işlemlerini tanımlayan faydalı bir kaynaktır.

Bir öğeye klavye desteği ekleme hakkında daha fazla bilgi edinmek için Google'ın Erişilebilirlik Temel Bilgileri belgelerindeki gezinen sekme dizini bölümüne göz atın.

ARIA rolleri ve özellikleri gerektiği gibi uygulanıyor

Özel kontrollerin yalnızca uygun klavye desteğine değil, uygun semantiklere de ihtiyacı vardır. Sonuçta, div semantik olarak yalnızca genel bir gruplandırma kapsayıcısıdır. Açılır menünüz için temel olarak div kullanıyorsanız kontrol türünün yardımcı teknolojiye iletilebilmesi için ek anlamlar eklemek üzere ARIA'dan yararlanmanız gerekir. Burada da kullanmanız gereken rolleri, durumları ve özellikleri belirleyerek ARIA Yazarlık Uygulamaları Kılavuzu size yardımcı olabilir. Ayrıca ARIA kılavuzundaki açıklamaların çoğu örnek kodla birlikte sunulur.

Öğeleri etiketleme

Doğal girişleri etiketlemek için MDN'de açıklandığı gibi yerleşik <label> öğesini kullanabilirsiniz. Bu, ekranda görsel bir kolaylık oluşturmanıza yardımcı olur ve girişe erişilebilirlik ağacında erişilebilir bir ad verir. Bu ad daha sonra 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'ler ve span'lar kullanılarak oluşturulanlar gibi) erişilebilir bir ad vermeyi desteklemez. Bu tür kontroller için aria-label ve aria-labelledby özelliklerini kullanmanız gerekir.

Otomatik test

Özellikle test söz konusu olduğunda tembel olmak iyi olabilir. Mümkün olduğunda erişilebilirlik testlerinizi otomatikleştirmeye çalışın. Böylece her şeyi manuel olarak yapmanız gerekmez. Sık karşılaşılan erişilebilirlik sorunlarını kolay ve hızlı bir şekilde kontrol etmenizi sağlayan birçok mükemmel sektör testi aracı mevcuttur:

Deque Systems tarafından oluşturulan aXe, Chrome uzantısı ve Node modülü (sürekli entegrasyon ortamları için ideal) olarak kullanılabilir. Bu kısa A11ycast'te, aXe'yi geliştirme sürecinize dahil etmenin birkaç farklı yolu açıklanmaktadır.

Lighthouse, Google'ın progresif web uygulamalarınızın performansını denetlemek için kullandığı açık kaynak projesidir. Lighthouse, PWA'nızın Service Worker ve Web Uygulaması Manifesti 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 de çalıştırır.

Sonuç

Erişilebilirlik, ekip çalışması gerektirir. Herkesin oynayacağı bir rol vardır. Bu kılavuzda, her ekip üyesinin konuyla ilgili bilgi edinmek ve uygulamalarının genel deneyimini iyileştirmek için kullanabileceği birkaç önemli öğe açıklanmaktadır.

Erişilebilirlik hakkında daha fazla bilgi edinmek için ücretsiz Udacity kursumuz ve web.dev'deki erişilebilirlik dokümanlarına göz atın.