Erişilebilir Web Tasarımı: Kontrol Listesinin Ötesi
Erişilebilirlik çoğu projede bir kontrol listesine indirgeniyor. Alt metinler eklendi, kontrast düzeltildi, madde işaretleri yeşile döndü. Listedeki maddelerin tek tek doğru olması, sitenin ekran okuyucuyla gerçekten kullanılabilir olduğu anlamına gelmiyor; asıl soru, faresiz bir kullanıcının sitedeki bir işi baştan sona bitirip bitiremediği.
Alt metin: eklemek değil, doğru olanı eklemek
"Her görsele alt metin ekleyin" tavsiyesi eksik. Yanlış alt metin, olmayan alt metinden daha kötü bir deneyim üretir, çünkü ekran okuyucu kullanıcısı okunan şeyi bilgi sanar. Dekoratif bir ayraç çizgisine "dekoratif çizgi" yazmak, kullanıcının vaktini çalar. Doğrusu alt="" vermek, yani öğeyi erişilebilirlik ağacından çıkarmak.
İkinci sık hata: ikon butonlara görünüşünü yazmak. Çöp kutusu ikonuna "çöp kutusu" değil "kaydı sil" yazılır. Alt metin görselin neye benzediğini değil, o konumda ne işe yaradığını anlatır. Ürün fotoğrafında ise ayrıntı gerekir, çünkü satın alma kararını taşıyan bilgi orada: renk, malzeme, üzerindeki yazı.
"Basit tut" tavsiyesi neyi atlıyor
Sadelik faydalı ama ölçülebilir bir hedef değil, bu yüzden herkes kendi anladığını uyguluyor. Erişilebilirlik açısından belirleyici olan az öğe değil, öngörülebilir yapı. Menü her sayfada aynı yerde mi, başlık seviyeleri atlanmadan iniyor mu (h2'den sonra h4 gelmiyor mu), sekme sırası ekrandaki görsel sırayla aynı mı.
Bu sonuncusu en çok CSS ile bozuluyor. Görsel düzeni order ya da mutlak konumlandırmayla değiştirdiğinde klavye kullanıcısı DOM sırasını gezmeye devam eder, yani ekranın altındaki bir alana sekme ile ortadan atlar. Düzeni gözle kontrol etmek bunu göstermez, sekme tuşuna basmak gösterir.
Ayrı bir erişilebilir sürüm çözüm değil
Engelli kullanıcılara "sadeleştirilmiş seçenek" sunma önerisi iyi niyetli ama pratikte kötü sonuçlanıyor. İki ayrı sürüm iki ayrı kod yolu demek ve ikisinden yalnızca biri her sprintte güncelleniyor. Altı ay sonra sade sürümdeki fiyatlar eski, kampanya sayfası eksik, iletişim formu bozuk oluyor. Ayrımcılık niyetle değil, bakım bütçesiyle üretiliyor.
Tek bir arayüzü herkesin kullanabileceği şekilde kurmak daha zor bir başlangıç, ama tek bakım yükü demek. Aynı formu hem fareyle hem klavyeyle çalışır hale getirmek, iki form yazmaktan ucuz.
Hareketi kullanıcı kapatsın
Kayan içerik ve otomatik dönen slaytlar dikkat dağıtmakla kalmıyor, vestibüler duyarlılığı olan kullanıcılarda fiziksel rahatsızlık yaratabiliyor. Bunu tamamen yasaklamak yerine işletim sistemi düzeyindeki tercihi dinlemek yeterli:
@media (prefers-reduced-motion: reduce) { .slider { animation: none; } .fade-in { transition-duration: 0.01ms; } }Otomatik ilerleyen bir karusel için ek kural şu: durdurma düğmesi olmalı ve o düğme klavyeyle erişilebilir olmalı. Fareyle üstüne gelince duran karusel, klavye kullanıcısı için durmuyor demektir.
Otomatik test neyi bulur, neyi bulamaz
Denetim araçları makine tarafından karara bağlanabilen kuralları yakalar: eksik nitelik, hatalı ARIA rolü, kontrast oranının normal metinde 4.5:1 eşiğinin altına düşmesi. Karar insan yargısı gerektirdiği anda susarlar. Alt metnin anlamlı olup olmadığını, bağlantı yazısının bağlamdan bağımsız anlaşılıp anlaşılmadığını, hata mesajının kullanıcıya ne yapacağını söyleyip söylemediğini ölçemezler.
Bu yüzden her sürümden önce üç dakikalık el testi, aylık otomatik raporlardan daha çok hata bulur:
- Fareyi bırak, ana sayfadan bir işlemi (kayıt, arama, sepete ekleme) yalnızca sekme ve enter ile bitir. Odağın nerede olduğunu her adımda görebiliyor musun?
- Tarayıcının yazı boyutunu %200'e çıkar. Metin taşıyor mu, buton yazıları kayboluyor mu?
- Ekran okuyucuyu aç, sadece başlıklar arasında gezin. Başlık listesi tek başına sayfanın içindekiler tablosu gibi okunuyorsa yapı doğru.
Üçünü de geçen bir sayfa mükemmel değildir, ama kullanıcıyı ilk ekranda kaybetmez. Kontrol listesi maddelerini işaretlemek bu üç testin yerini tutmaz; sıralama da tersine çevrilmemeli, önce sayfa gezilebilir olsun, sonra maddeler tamamlansın.