Erişilebilir Görsel Tasarım: Kontrast, Odak ve Alt Metin
Görsel erişilebilirlik pahalı bir yeniden tasarım işi değil, birkaç tekrar eden kararın doğru verilmesi. Aşağıdaki beş madde tasarım dosyasında ve CSS'te karşılığı olan, test edilebilir kararlar. Her birinin sonunda nasıl kontrol edileceği yazıyor, çünkü test edilmeyen erişilebilirlik iddiası iddia olarak kalıyor.
Kontrastı gözle kestirmeyin, ölçün
WCAG'in taban çizgisi normal metin için 4.5:1. Bu oran büyük metinde 3:1'e düşüyor, ama "büyük" kelimesi çoğu yazıda tanımsız bırakılıyor ve orada iş karışıyor. Ölçüt şu: 24 piksel ve üstü, ya da kalın kullanılıyorsa 18,66 piksel ve üstü. Bunun altındaki hiçbir metin 3:1 muafiyetinden yararlanamaz, kalın olsa bile.
Oran hesabı renk tonundan değil bağıl parlaklıktan çıkıyor. Pratik sonucu şu: doygun bir turuncu ile doygun bir mavi yan yana canlı görünür ama kontrast testinden geçmeyebilir; buna karşılık iki gri tonu sıkıcı görünüp rahatça geçer. Gözünüzün "bu zaten okunuyor" demesi ölçüm yerine geçmiyor.
Kontrol: tarayıcı geliştirici araçlarında bir metin öğesi seçildiğinde renk seçicinin yanında kontrast oranı ve geçip geçmediği zaten yazıyor. Ayrı bir araç kurmadan, açılış sayfasındaki her metin katmanını beş dakikada gezebilirsiniz. Placeholder metinleri ve devre dışı buton etiketleri en sık kaçan yerler.
Bilgiyi tek başına renge yüklemeyin
Form hatasını sadece kırmızı çerçeveyle gösteriyorsanız, o hatayı görmeyen bir kullanıcı kitlesi var. Çözüm basit: renge ek olarak bir simge ve kısa bir metin. "Bu alan zorunlu" yazan bir satır, kırmızı çerçevenin yaptığı işi her koşulda yapar.
Aynı kural grafiklerde de geçerli. Çizgi grafikte serileri yalnızca renkle ayırmak yerine çizgi desenini de değiştirin, ya da doğrudan çizginin ucuna etiket koyun. Lejant zaten okuyucuyu ileri geri baktırıyor, etiket ondan daha hızlı çalışıyor.
Kontrol: sayfayı gri tonlamaya çevirin, hâlâ anlaşılıyor mu bakın. Bunun renk körlüğü simülasyonu olduğunu söylemem, değil; deuteranopi gri tonlama gibi görmez. Ama "bu bilgi tek başına renge mi bağlı" sorusunu net cevaplar ve asıl sorduğunuz soru bu.
Odak halkasını kapatmayın
Klavyeyle gezen kullanıcı için odak göstergesi imleçtir. Tasarım gözden geçirmelerinde "mavi çerçeve çirkin duruyor" denince ilk refleks outline: none oluyor ve sayfa o an klavyeyle kullanılamaz hale geliyor. Ben bu satırı yazmam; çirkinse değiştiririm.
Özelleştirmenin doğru yolu :focus-visible. Fareyle tıklayan kullanıcıya halka göstermez, klavyeyle gelene gösterir:
a:focus-visible, button:focus-visible { outline: 2px solid #1a5fb4; outline-offset: 2px; }Halkanın kendisi de kontrast kuralına tabi. Koyu zeminde koyu mavi bir halka teknik olarak vardır, pratikte yoktur. Bir de outline-offset verin, aksi halde halka butonun kenarına yapışıp kaybolur.
Kontrol: adres çubuğundan başlayıp Tab'a basmaya devam edin. Sayfanın sonuna kadar her adımda odağın nerede olduğunu görebiliyorsanız geçtiniz. Odağın kaybolduğu ya da görünmez bir öğeye düştüğü yer, düzeltilecek yerdir.
Alt metin: neyi anlatıyor, neyi tekrar ediyor
Alt metin görselin tarifi değil, görselin sayfadaki işlevinin karşılığı. Aynı fotoğraf haber sayfasında "kürsüde konuşan belediye başkanı", ürün sayfasında "lacivert, uzun kollu gömlek" olabilir. Doğru soru "bu resimde ne var" değil, "bu resim burada ne iş yapıyor".
- Altında zaten açıklama varsa alt metinde onu tekrarlamayın, ekran okuyucu ikisini üst üste okur.
- Görsel salt dekoratifse
alt=""yazın. Etiketi tamamen atlamak aynı şey değil; bazı okuyucular o durumda dosya adını okur. - "Resim", "görsel", "fotoğraf" ile başlamayın, ekran okuyucu türü kendi söylüyor.
- Görsel bir bağlantıysa alt metin nereye gittiğini söylemeli, neye benzediğini değil.
Testi kısa tutun ki yapılsın
Erişilebilirlik testi büyük bir organizasyon işi gibi kurgulandığında hiç yapılmıyor. Küçük tutun, sık yapın.
Otomatik denetleyiciler ucuz ama sınırlı; kaçırdıkları şey genelde bağlam. Alt metnin var olduğunu görürler, yanlış olduğunu görmezler. Onun için her sürümde iki dakikalık klavye turu ve bir ekran okuyucuyla ana akışın bir kez dinlenmesi, aylık büyük denetimden daha çok iş çıkarıyor.
Gerçek kullanıcıyla test sıraya girdiğinde de küçük başlayın. Beş kişilik bir grupta düşük görme ya da motor kısıtı olan bir iki katılımcının bulunması, ekibin kendi içinde yaptığı on turdan fazlasını gösterir. Bulguları da sıraya dizin: bir kullanıcının işi tamamlamasını engelleyen sorun önce, estetik pürüz sonra.