Web Erişilebilirliği (a11y): Temel İlkeler

Web'i geliştirirken çoğu zaman "bu buton güzel görünüyor mu?" diye sorarız. Ama nadiren "bu butonu ekran okuyucuyla kullanan biri ne hisseder?" diye düşünürüz. İşte tam bu boşluğu dolduran kavram: web erişilebilirliği, yani kısaca a11y (accessibility kelimesinin 'a' ile 'y' arasında 11 harf olduğundan gelen bu kısaltmayı severim).

a11y Nedir?

Web erişilebilirliği; görme, işitme, motor veya bilişsel engeli olan kullanıcıların web içeriklerine eşit biçimde erişebilmesi anlamına gelir. Dünya Sağlık Örgütü verilerine göre dünya nüfusunun yaklaşık %16'sı bir tür engelle yaşıyor. Bunu görmezden gelen bir ürün, potansiyel kullanıcılarının büyük bir bölümünü kapı dışarı ediyor.

Üstelik erişilebilirlik sadece engelli kullanıcıları değil herkesi etkiler: parlak güneşte telefon ekranına bakan birini, yavaş internet bağlantısında siteyi açmaya çalışan birini ya da klavyeyle gezinmeyi tercih eden bir geliştiriciyi düşünün.

WCAG: Rehberimiz

Web erişilebilirliğinin temel standartları WCAG (Web Content Accessibility Guidelines) ile belirlenir. W3C tarafından yayınlanan bu kılavuz, dört ana ilke üzerine kuruludur. Bu ilkeler POUR kısaltmasıyla özetlenir:

• P — Perceivable (Algılanabilir): İçerik, kullanıcının en az bir duyusuyla algılanabilir olmalı. Görsellere alt metni eklemek, videolara altyazı sağlamak bu ilkenin somut örnekleri.
• O — Operable (İşletilebilir): Tüm işlevler yalnızca fareyle değil, klavyeyle de kullanılabilmeli. Odak (focus) yönetimi burada kritik rol oynar.
• U — Understandable (Anlaşılabilir): İçerik ve arayüz tahmin edilebilir, sade bir dilde yazılmış olmalı. Formlar hata mesajlarını net vermeli; "Hata oluştu" yazmak yetmez.
• R — Robust (Sağlam): İçerik, mevcut ve gelecekteki yardımcı teknolojilerle uyumlu olacak biçimde kodlanmalı. Semantik HTML burada temel taşımızdır.

Pratik Başlangıç Noktaları

Teoriden pratiğe geçmek istiyorsanız şu adımlarla başlayabilirsiniz:

1. Semantik HTML kullanın. <div> yerine <button>, <nav>, <main>, <article> gibi anlamlı etiketler tercih edin. Ekran okuyucular bu etiketleri sever. 2. Renk kontrastını kontrol edin. Metin ile arka plan arasındaki kontrast oranı en az 4.5:1 olmalı. Contrast Checker gibi araçlar bir dakikada sonuç verir. 3. Tüm görsellere alt metni ekleyin. Dekoratif görseller için alt="" (boş) kullanmak yeterlidir; ekran okuyucu bunu atlayacaktır. 4. Klavye navigasyonunu test edin. Sayfanızda hiç fare kullanmadan Tab tuşuyla gezinin. Odak kayboluyorsa bir yerlerde sorun var demektir. 5. ARIA'yı aşırıya kaçmadan kullanın. aria-label, aria-describedby gibi nitelikler HTML'in yetersiz kaldığı yerlerde devreye girer; ama iyi yazılmış semantik HTML çoğu zaman ARIA'ya ihtiyaç bırakmaz.

Araçlar ve Test

• axe DevTools (tarayıcı uzantısı): Sayfadaki erişilebilirlik sorunlarını anında işaretler.
• NVDA / VoiceOver: Gerçek ekran okuyucularla test, otomatik araçların yakalayamadığı sorunları ortaya çıkarır.
• Lighthouse: Chrome'un dahili aracı; erişilebilirlik skorunu hızla verir.

Son Söz

Erişilebilirlik bir "ekstra özellik" değil, kaliteli yazılımın ayrılmaz bir parçası. Projeye baştan dahil edildiğinde maliyeti düşük, etkisi ise oldukça yüksek. Bir sonraki bileşeni yazarken kendinize şunu sorun: "Bunu hiç görmeden, hiç fare kullanmadan da kullanabilir miyim?" Cevabınız "evet" ise doğru yoldasınız.