Erişilebilir Web Tasarımı: Engelli Kullanıcılar İçin Çalışan Kurallar
Erişilebilirlik bir niyet meselesi değil, sayıyla ölçülen bir eşikler listesi. Klavyeyle baştan sona gezilebilen bir sayfanın, 4.5:1 kontrastın, bilerek boş bırakılmış bir alt metnin karşılığı var ve hepsi on dakikada test edilebilir. Aşağıdakiler, çoğu sitenin ilk denemede kırıldığı yerler.
Fareyi bırak, Tab'a bas
Erişilebilirlik denetimine buradan başlanır, çünkü ekran okuyucu kullanan da, titremesi yüzünden fare tutamayan da, sesle komut veren de aynı yoldan geçer: klavye. Sayfayı açıp Tab'a basmaya başla ve üç şeye bak. Odağın hangi öğede olduğunu her adımda görebiliyor musun? Sekme sırası, gözünle takip ettiğin sıraya uyuyor mu? Açılan menüyü, modalı, tarih seçiciyi Esc ile kapatıp kaldığın yere dönebiliyor musun?
En sık kırılan yer birincisi. Bir e-ticaret projesinde tasarım ekibi odak çerçevesini çirkin buldu diye outline: none yazmıştı, sipariş formunu klavyeyle dolduran kullanıcı hangi alanda olduğunu göremediği için üç adımda kayboluyordu. Çerçeveyi kaldırma; beğenmiyorsan :focus-visible ile kendi stilini ver.
Tek tuşla gezinti bir çözüm değil
Erişilebilirlik önerisi diye sık sık "tek tuşa basınca menüye atlasın" tarzı kısayollar tavsiye edilir. WCAG 2.1'in 2.1.4 ölçütü tam tersini ister: tek karakterli bir kısayol tanımlıyorsan kullanıcı bunu kapatabilmeli, başka tuşa atayabilmeli ya da kısayol yalnızca ilgili öğe odaktayken çalışmalı. Sebebi basit, sesle yazan biri "sonra" derken içindeki S sayfada bir işlem tetikliyor. Erişilebilirlik için eklenen özellik, başka bir engel grubunu siteden atıyor.
Alt metin her görsele yazılmaz
Görselin taşıdığı bilgiyi yaz, görseli tarif etme. Ayırıcı çizgi, dekoratif ikon, arka plan deseni gibi hiçbir şey anlatmayan görsellerde alt="" doğru cevaptır; boş bırakmak ekran okuyucuya "burayı atla" der. Alt niteliğini hiç yazmazsan okuyucu dosya adını heceler.
Bir kuralı da baştan koy: metni görsele gömme. Kampanya banner'ındaki fiyat, PNG'nin içindeyse ne büyütülebilir, ne seçilebilir, ne de aranabilir.
Kontrast ve ölçek için somut sayılar
Normal metinde arka planla oran en az 4.5:1, iri metinde (24 piksel ya da 18,66 piksel kalın ve üstü) 3:1. Buton kenarı, form çerçevesi, ikon gibi anlam taşıyan arayüz öğeleri de 3:1 istiyor. Tarayıcıyı yüzde 200 yakınlaştırdığında içerik kaybolmamalı, 320 piksel genişlikte yatay kaydırma çıkmamalı.
Bunu tutturmanın en kolay yolu punto ve kutu ölçülerini piksele sabitlememek. rem kullan, yükseklikleri sabitleme, metin büyüyünce kutu da büyüsün. Dokunmatik hedefleri 24x24 pikselin altına indirme; iki küçük ikonu yan yana koyacaksan aralarına boşluk bırak.
Altyazı yeterli değil, transkript de koy
Videoya otomatik altyazı ekleyip geçmek işi bitirmiyor. Ham otomatik çıktı özel isimlerde ve teknik terimlerde bozuluyor, üstelik sesli olayları hiç yazmıyor. İşitme engelli izleyici için "telefon çalar", "kapı çarpar" gibi bilgiler de altyazıya girer, çünkü sahnenin anlamı çoğu zaman oradadır.
Yanına düz metin transkript koy. Transkript hem işitme hem görme engeli olan kullanıcının tek erişim yolu, hem de arama motorunun okuyabildiği tek sürüm. Podcast yayınlıyorsan transkript zaten şart.
Bilişsel yükü azaltmanın işe yarayan kısmı
Öğrenme güçlüğü olan kullanıcılar için önerilen "sade tasarım" tavsiyesi fazla soyut kalıyor. Somutu şu: bir ekranda tek karar sor, çok adımlı formu tek uzun sayfaya sıkıştırma. Otomatik başlayan slider, video ve kayan duyuru varsa durdurma düğmesi koy; beş saniyeden uzun süren her hareket için bu gerekiyor.
Hata mesajını da sayfanın tepesinde toplama. Mesaj, hatalı alanın yanında dursun ve ne yapılacağını söylesin: "Geçersiz tarih" değil, "Tarihi 12.08.2026 biçiminde yaz".
Test etmeden bilemezsin
Otomatik denetim araçları kontrast ve eksik nitelik gibi makinenin görebildiği hataları yakalar, ki bu bulunabilecek sorunların kabaca üçte biri. Alt metnin doğru şeyi anlatıp anlatmadığını, sekme sırasının mantıklı olup olmadığını hiçbir araç ölçemez. Sayfayı VoiceOver ya da NVDA açıkken bir kez baştan sona dinle, listenin geri kalanı kendiliğinden çıkar.
Kaynaklar