Bir arayüzü yalnızca kendi ekranınızda, kendi fare ve görme koşullarınızla değerlendirdiğinizde deneyimin bir bölümünü görürsünüz. Erişilebilirlik çalışması, farklı yetilerle ve yardımcı teknolojilerle aynı görevin yapılabilmesini ele alır. Başlamak için kritik bir akış seçip tasarım ile çalışan arayüzü birlikte inceleyebilirsiniz.
1. Tamamlanması gereken bir görev seçin
Örnek olarak bir eğitim bulma ve kayıt formunu doldurma akışını seçin. Başlangıcı, adımları ve başarı durumunu yazın. Bu görevde görülecek başlıkları, bağlantıları, form alanlarını, hata mesajlarını ve açılan pencereleri birlikte değerlendireceğiniz bir listeye alın.
Görsel tasarım dosyasına inceleme notları ekleyebilirsiniz; ancak klavye sırası ve ekran okuyucu çıktısı gibi davranışları çalışan arayüzde kontrol etmeniz gerekir. Bir bileşenin varsayılan, odak, hata ve yüklenme durumlarının nasıl sunulacağını ekipçe kararlaştırın.
2. Metin kontrastını ve renk kullanımını kontrol edin
WCAG 2.2’nin AA düzeyindeki minimum metin kontrastı ölçütü, istisnaları dışında normal metin için en az 4.5:1 oranını ister. WCAG’nin büyük metin tanımına giren metinlerde eşik 3:1’dir. Tasarımdaki metin ve arka plan renklerini bir kontrast ölçüm aracıyla değerlendirin.
Örnek kayıt formunda hatalı alanı yalnızca kırmızı çerçeveyle belirtmeyin; sorunu yazıyla da açıklayın. Ders durumlarını yeşil ve gri noktalarla ayırıyorsanız yanlarına “Tamamlandı” veya “Henüz başlamadı” gibi anlaşılır metinler eklemeyi düşünün. Bilginin rengi ayırt etmeden anlaşılmasını hedefleyin.
3. Akışı klavyeyle baştan sona kullanın
W3C’nin klavye ölçütü, işlevlerin klavye arayüzüyle kullanılabilmesini ele alır; hareketin izlediği yola bağlı bazı işlevler için istisnası vardır. Standart bir kayıt akışında fareyi bırakıp Tab ve Shift+Tab ile ilerleyin. Bağlantı ve butonları uygun tuşlarla çalıştırmayı deneyin.
Örnek kontrolde seçili öğenin görünür olup olmadığını, sıranın anlamlı ilerleyip ilerlemediğini ve bir alanda takılıp kalıp kalmadığınızı kaydedin. Bir pencere açıldığında içeriği kullanabilmeli ve kapattığınızda akışa anlamlı bir noktadan devam edebilmelisiniz.
4. Form alanlarına anlaşılır etiketler verin
W3C’nin form rehberi, alanların amaçlarının etiketlerle belirtilmesini ve etiketlerin ilgili alanlarla ilişkilendirilmesini açıklar. Yer tutucu metin, yazmaya başladığınızda kaybolduğu için görünür etiketin bütün işini üstlenemez. Alanın adı ve gerekli açıklaması birlikte anlaşılabilsin.
Örnek bir e-posta alanında etiket “E-posta adresi” olabilir. Veri biçimi hatalıysa ilgili alanın yakınında sorunu açıklayın ve düzeltme yolunu gösterin. Hatanın görsel yerleşimi kadar yardımcı teknolojiye nasıl iletildiğini de çalışan formda kontrol edin.
Bir alanı dört açıdan inceleyin
Örnek kontrol: Alanın ne istediği yazmadan önce anlaşılıyor mu? Klavyeyle ulaşıldığında odak görünüyor mu? Ekran okuyucu alanın adını ve açıklamasını iletiyor mu? Hata oluştuğunda kişi hangi alanı nasıl düzelteceğini öğrenebiliyor mu? Bu soruları tasarım ve geliştirme ekibi birlikte yanıtlayabilir.
5. Başlıkları ve görsel alternatiflerini bağlama göre kurun
Sayfadaki başlıkları bölüm ilişkilerini anlatacak şekilde düzenleyin. Bir metni yalnızca büyük görünmesi için başlık olarak işaretlemek yerine içerik yapısını düşünün. Bağlantı adlarının da çevresindeki bağlamla birlikte nereye götürdüğünü anlatmasını sağlayın.
W3C’nin görsel alternatifleri karar ağacı, görselin işlevine ve bağlamına göre farklı yaklaşımlar önerir. Bilgi veren bir çizimin ilettiği anlamı açıklayın; yalnızca süs amaçlı görseli gereksiz yere okutmayın. Bir bağlantının içindeki görsel içinse bağlantının anlaşılır bir adı olup olmadığını kontrol edin.
6. Araç sonuçlarını elle yapılan kontrollerle tamamlayın
Otomatik kontroller bazı sorunları bulabilir; metnin bağlama uygunluğunu ve bütün bir görevin anlaşılmasını tek başına göstermez. Örnek akışı klavye, büyütme ve ekran okuyucuyla inceleyin. Uygun olduğunda farklı erişim ihtiyaçları olan kişilerle değerlendirme yapın.
Her sorun için bulunduğu adımı, engellenen görevi ve yeniden kontrol yöntemini kaydedin. WCAG 2.2’nin ilgili ölçütlerini inceleyerek kapsamı genişletin. Buradaki başlangıç kontrollerini tamamlamak, ürünün bütün erişilebilirlik gereksinimlerini karşıladığını göstermek için yeterli değildir.
Aklınızda kalsın
Erişilebilirlik çalışmasına somut bir kullanıcı göreviyle başlayın. Görsel kararları, anlamlı içerik yapısını ve klavye davranışını birlikte kontrol edin; bulguları çalışan arayüzde tekrar değerlendirin.
Kaynaklar
İlgili yazılar
Öğrendiklerini pratiğe taşı.
UX/UI Tasarım Eğitimi
Araştırmadan arayüz tasarımına, becerilerini gerçek projelerle geliştir.