Erişilebilir Web Tasarımı: Kontrast, Klavye ve Alt Metin
Erişilebilirlik denince akla önce ekran okuyucuyla gezen görme engelli bir ziyaretçi gelir. Oysa kontrastı düşük bir butonu güneş altında okumaya çalışan da, kolu alçıda olduğu için tek eliyle form dolduran da aynı yerlerde takılır. İyi tarafı şu: bu takılmaların büyük kısmı kontrast oranı, klavye odağı ve alt metin gibi ölçülebilir birkaç karara iniyor.
Erişilebilirlik kimi kapsar
Bir kısıt kalıcı olabilir (doğuştan görme engeli), geçici olabilir (kırık bilek), ya da tamamen duruma bağlı olabilir: bebeği kucağında tek eliyle telefon kullanan biri gibi. Arayüz tarafında üçü de aynı şeye ihtiyaç duyar, yani tek elle, klavyeyle ya da sesle tamamlanabilen bir akışa. Erişilebilirlik bu yüzden ayrı bir kullanıcı grubunun meselesi değil, aynı arayüzün zor koşullardaki hali.
Yasal taraf da işin içine girdi. Avrupa Birliği'nde 2025'te uygulanmaya başlayan Erişilebilirlik Yasası e-ticaret, bankacılık ve ulaşım gibi hizmetleri kapsıyor, dolayısıyla Avrupa'ya satış yapan bir site için bu artık tercih meselesi olmaktan çıkıyor.
Kontrast göz kararına bırakılmaz
WCAG 2.1 AA seviyesi normal boyutlu metin için 4.5:1, büyük metin için 3:1 kontrast oranı ister. Büyük metnin tanımı 18pt (yaklaşık 24px), kalın yazılmışsa 14pt (yaklaşık 18,66px). Sadece metin de değil: ikon yalnız butonlar, form alanlarının sınır çizgileri ve grafiklerdeki anlam taşıyan renkler de 3:1 eşiğine tabi. Tasarımların en sık atladığı yer burası, çünkü herkes yazıya bakıyor, kimse çerçeveye bakmıyor.
Bu oranı tahmin etmeye gerek yok. Tarayıcının geliştirici araçlarındaki renk seçici değeri doğrudan gösteriyor. Sayfanın tamamını tek geçişte taramak için WAVE, renk körlüğünün ekranda neye benzediğini görmek için Color Oracle işi görür.
Fareyi bırakın, Tab'a basın
En hızlı erişilebilirlik testi şudur: fareyi kenara koyun ve sayfayı baştan sona Tab tuşuyla dolaşın. Menü açılıyor mu, modal kapandığında odak nereye dönüyor, formu gönderebiliyor musunuz? Odağın o an nerede olduğunu göremiyorsanız ilk hatayı zaten buldunuz.
Odak halkasını CSS'ten kaldırıp yerine hiçbir şey koymamak, karşılaştığım en yaygın tek satırlık erişilebilirlik hatası (tasarımda çirkin duruyor diye siliniyor, yerine bir şey koymak kimsenin aklına gelmiyor). outline: none yazacaksanız hemen altına görünür bir :focus-visible stili yazın.
Sekme sırasının da görsel sırayla uyuşması gerekir. CSS ile yerini değiştirdiğiniz bir kutu, klavyede hâlâ eski sırasında durur.
Alt metin her görsele yazılmaz
"Tüm görsellere alt metin ekleyin" tavsiyesi eksiktir. Görsel yalnızca süslemeyse alt niteliği boş bırakılmalıdır (alt=""), aksi halde ekran okuyucu dosya adını ya da anlamsız bir açıklamayı yüksek sesle okuyup içeriği gürültüye boğar. İşleyen kural şu: görselin taşıdığı bilgi metinde yoksa alt metne yazılır, metinde zaten varsa o görsel süslemedir.
Grafikler ayrı bir başlık. "2024 satış grafiği" bir alt metin değil, dosya adının cümleye çevrilmiş hali. Grafiğin söylediği şey neyse onu yazın, veri karmaşıksa aynı sayıları sayfada tablo olarak verin.
Başlıklar sayfanın içindekiler tablosudur
Ekran okuyucu kullanan biri sayfayı baştan sona dinlemez, başlıklar arasında zıplar. Bu yüzden h2 ve h3 düzeni görsel bir tercih değil, sayfanın gezinme iskeletidir. Punto küçük görünsün diye h4 seçmek, içindekiler tablosuna yanlış madde yazmakla aynı şey; yazıyı küçültmek istiyorsanız bunun için CSS var.
Bağlantılar da aynı mantıkla dolaşılabiliyor. Arka arkaya sıralanmış on tane "tıklayın" bağlantısı hiçbir şey ifade etmez. Bağlantı metni, çevresindeki cümle olmadan tek başına okunduğunda nereye gittiğini söylemeli.
Test etmek
Otomatik araçlar ucuz ve hızlı, ama sınırları nettir: alt metnin var olup olmadığını görürler, anlamlı olup olmadığını göremezler. Başlık sırasının bozulduğunu yakalarlar, başlığın altındaki bölümü anlatıp anlatmadığını yakalayamazlar. Rapordaki sıfır hata, sitenin kullanılabildiği anlamına gelmiyor.
İkinci adım elle yapılır. VoiceOver ya da NVDA açıp kendi sitenizde on dakika geçirmek, otomatik raporun tamamından daha çok şey gösterir. Ölçütlerin tek tek karşılığını görmek isterseniz WCAG hızlı referansı her maddeyi örnekle açıklıyor.