Web Erişilebilirliği: Sadece Yasal Zorunluluk Değil, Kullanıcı Deneyimi

Web erişilebilirliği (a11y), genellikle "ekran okuyucu kullanan görme engelliler için" olarak dar bir çerçevede algılanır. Oysa erişilebilirlik aslında çok daha geniş bir alandır ve doğru uygulandığında tüm kullanıcı deneyimini iyileştirir.

Erişilebilirlik kimleri etkiler?

Doğrudan etkilenenler: görme engelliler (ekran okuyucu kullanırlar), hareket engelliler (sadece klavye kullanırlar), işitme engelliler (videolar için altyazı gerekir), bilişsel zorluk yaşayanlar (sade dil, net hiyerarşi gerekir).

Dolaylı olarak: yaşlılar (büyük yazı, yüksek kontrast), geçici sınırlamalar (kolu kırılan, gözünü ameliyat olan), zor koşullar (güneşli ortamda mobil ekran, gürültülü yer), yavaş bağlantılar.

WHO verilerine göre dünya nüfusunun yaklaşık %15'i bir tür engelle yaşıyor. Türkiye'de bu oran daha da yüksek. Erişilebilir olmayan bir web sitesi, bu pazarın tamamını dışlar.

WCAG: Standart referans

Web Content Accessibility Guidelines (WCAG), erişilebilirlik için uluslararası standart. Üç seviye: A (asgari), AA (önerilen), AAA (mükemmel). Çoğu kurumsal site AA hedeflemeli.

WCAG dört prensip etrafında kurulu: Algılanabilir (Perceivable), Çalıştırılabilir (Operable), Anlaşılır (Understandable), Sağlam (Robust). Kısaca POUR.

Semantik HTML temeldir

Doğru HTML elementleri kullanmak erişilebilirliğin %50'sidir. Buton için `<button>`, link için `<a>`, form için `<form>` ve `<label>`, başlık için `<h1>`-`<h6>` hiyerarşik kullanılmalı.

`<div onClick={...}>` ile buton yapmak erişilebilirlik faciasıdır. Ekran okuyucu bunu buton olarak tanımaz, klavye ile odaklanılamaz.

Renk kontrastı ve görsel hiyerarşi

Metin ile arkaplan arasındaki kontrast oranı WCAG AA için en az 4.5:1 olmalı (büyük metin için 3:1). Açık gri üzerine açık gri yazmak, "zarif" görünebilir ama düşük görüş için okunmaz.

Sadece renkle bilgi iletmemek de önemli. "Kırmızı satır hata" yerine, "Kırmızı satır + ünlem ikonu + 'Hata:' kelimesi" hem renk körü kullanıcılara hem de ekran okuyuculara hitap eder.

Klavye navigasyonu

Site fareyi kullanmadan tamamen gezilebilmeli. Tab tuşu ile odak bir interaktif elementten diğerine geçer. Odak halkası (focus ring) görünür olmalı; varsayılanı görsel kaygıyla kaldırmak yaygın bir hatadır.

Modal'lar açıldığında odak içeride kalmalı (focus trap), kapandığında odak açtıran elemana dönmeli.

Skip-to-content linki

Sayfanın en üstüne, klavye odağı geldiğinde görünen bir "İçeriğe geç" linki ekleyin. Böylece klavye kullanıcısı her sayfada navbar'ı tabbing yapmak zorunda kalmaz.

Form'lar erişilebilir mi?

Her input'un bir `<label>`'ı olmalı. Sadece placeholder kullanmak yetmez (kullanıcı yazınca kaybolur, ekran okuyucu güvenilmez biçimde okur).

Hata mesajları input'a `aria-describedby` ile bağlanmalı. `aria-invalid="true"` ile geçersiz durumu belirtilmeli.

Görseller için alt metin

Anlamlı görsellerin `alt` özniteliği olmalı. Dekoratif görseller için `alt=""` (boş ama mevcut). `alt="görsel"` veya `alt="image1.jpg"` kötü uygulamadır.

Test etmek

Manuel test: klavye ile baştan sona gezin, ekran okuyucu (NVDA, VoiceOver) ile sayfayı dinleyin.

Otomatik test: Lighthouse, axe DevTools, WAVE gibi araçlar pek çok sorunu yakalar. %100 otomasyon mümkün değil; manuel test şart.

Yasal boyut

Avrupa'da Web Accessibility Directive (WAD), kamu kurumları için WCAG AA zorunlu. Türkiye'de henüz bu kapsamda bağlayıcı bir düzenleme olmasa da, KVKK'ya benzer bir trend geliyor. Erken uyum, sonradan acele yerine geçer.

Sonuç

Erişilebilirlik bir "ek özellik" değil, kalite çıtasıdır. Kullanıcılarınızın daha geniş bir kesimine ulaşır, daha iyi UX sağlar, SEO'nuz iyileşir, yasal risk azalır. Üstelik doğru uygulandığında, kod karmaşıklığı azalır.