Web erişilebilirliği (accessibility) nedir? WCAG standartlarına giriş

Web erişilebilirliği (accessibility), bir web sitesinin görme, işitme, hareket ve bilişsel engeli olan kullanıcılar dahil herkese kullanılabilir olmasını sağlayan tasarım ve geliştirme pratiğidir. Engellilik kalıcı olmak zorunda değildir: kırık bir kol, parlak güneş altında kullanılan telefon veya yavaş internet bağlantısı da geçici erişilebilirlik ihtiyaçları yaratır.

Türkiye nüfusunun yaklaşık yüzde 12'si herhangi bir engele sahiptir. Bu rakam, web erişilebilirliğini hem etik bir sorumluluk hem de gerçek bir potansiyel kitle olarak değerlendirmek için yeterli bir gerekçedir. Üstelik web erişilebilirliği iyi uygulandığında SEO'ya da doğrudan katkı sağlar.

⠀

Web erişilebilirliğini kimler için tasarlıyoruz?

⠀

Erişilebilirlik dört ana engel kategorisini kapsar:

Görme engeli: Ekran okuyucu (screen reader) kullanan kör kullanıcılar, renk körü bireyler ve düşük görüş yeteneğine sahip kişiler. Ekran okuyucular sayfa içeriğini metin olarak okur; bu nedenle görsel içeriklerin metin karşılığı (alt text) bulunmalıdır.

İşitme engeli: Video ve ses içeriklerinde altyazı ve transkript zorunlu hale gelir. Ses olmadan anlaşılamayan içerik işitme engelli kullanıcılara kapalıdır.

Hareket (motor) engeli: Fare kullanamayan kullanıcılar klavye ile navige eder. Tüm etkileşimli öğeler — linkler, butonlar, form alanları — klavyeyle erişilebilir ve odaklanabilir (focusable) olmalıdır.

Bilişsel engel: Dikkat dağınıklığı, disleksi veya öğrenme güçlüğü olan kullanıcılar net, sade ve tahmin edilebilir arayüzlerden yararlanır. Aşırı animasyon, otomatik oynatılan içerik ve karmaşık form yapıları bu grubu en çok zorlayan unsurlardır.

⠀

WCAG 2.1 standartları: A, AA ve AAA seviyeleri

⠀

⠀

⠀

WCAG (Web Content Accessibility Guidelines), W3C tarafından yayımlanan uluslararası web erişilebilirlik standartlarıdır. Üç uyumluluk seviyesi vardır:

A (Temel): En kritik engellerin ortadan kaldırıldığı minimum seviye. Alt text eksikliği, klavye erişimi yokluğu veya içeriğin yalnızca renkle ifade edilmesi bu seviyeyi ihlal eder.

AA (Önerilen): Yasal gerekliliklerin çoğunun dayandığı pratik standart. Normal metin için minimum 4.5:1 kontrast oranı, başlık hiyerarşisi, form etiketleri ve hata mesajları bu seviyede değerlendirilir. Türkiye'de kamu kurumlarına yönelik e-Devlet mevzuatı AA uyumunu hedefler.

AAA (İleri): Tüm kullanıcılar için maksimum erişilebilirlik. Normal metin için 7:1 kontrast oranı, işaret dili desteği ve genişletilmiş altyazılar bu seviyede yer alır. Tüm site için AAA zorunlu tutulmaz; bölüm bazında hedeflenebilir.

⠀

Web erişilebilirliğinde temel uygulamalar

⠀

Renk kontrastı: Metin ve arka plan arasında yeterli kontrast bulunmalıdır. AA seviyesi için normal metin 4.5:1, büyük metin 3:1 oranına ulaşmalıdır. WebAIM Contrast Checker ile saniyeler içinde ölçebilirsiniz.

Alt text: Tüm anlamlı görsellerin alt özelliği dolu olmalıdır. Dekoratif görsellerde alt="" (boş) kullanmak ekran okuyucunun gereksiz içerik okumasını engeller.

Klavye navigasyonu: Tab tuşuyla tüm etkileşimli öğelere sırasıyla ulaşılabilmeli, mevcut odak noktası (focus indicator) görünür olmalıdır. Varsayılan tarayıcı outline'ını CSS ile tamamen kaldırmak bu kuralı ihlal eder.

ARIA etiketleri: HTML anlamsal öğelerin yeterli olmadığı durumlarda aria-label, aria-describedby ve role özelikleri içeriği ekran okuyuculara açıklar. Ancak ARIA gereksiz yere kullanılmamalıdır — anlamsal HTML her zaman önce gelir.

Form etiketleri: Her form alanının <label> öğesiyle ilişkilendirilmesi zorunludur. Placeholder metin, etiket yerine geçemez; kullanıcı yazmaya başladığında kaybolur.

⠀

Web erişilebilirliği ve SEO örtüşmesi

⠀

Web erişilebilirliği ve SEO büyük ölçüde örtüşür, çünkü her ikisi de içeriğin makineler tarafından doğru anlaşılmasına dayanır.

• Alt text hem ekran okuyuculara hem de Google'a görsel içeriği açıklar.
• Başlık hiyerarşisi (H1, H2, H3) hem içerik yapısını hem de tarama sırasını düzenler.
• Klavye erişilebilirliği Googlebot'un JavaScript ile oluşturulan içeriğe ulaşmasını kolaylaştırır.
• Sayfa hızı hem Core Web Vitals skoru hem de kullanıcı erişilebilirliği için kritiktir.

⠀

Erişilebilir bir site, iyi organize edilmiş ve temiz kodlu bir sitedir. Bu da SEO için güçlü bir temel oluşturur.

⠀

Ücretsiz test araçları ile web erişilebilirliği denetimi

⠀

⠀

⠀

Google Lighthouse: Chrome DevTools veya web.dev/measure üzerinden çalışır. Erişilebilirlik skorunu 0–100 arasında verir ve hangi öğelerin başarısız olduğunu listeler. Hızlı bir genel bakış için idealdir.

axe DevTools: Chrome eklentisi olarak çalışır; Lighthouse'dan daha ayrıntılı hata açıklamaları sunar ve yanlış pozitif oranı düşüktür. Geliştiriciler için tercih edilen araçtır.

WAVE (Web Accessibility Evaluation Tool): Sayfayı görsel olarak işaretler; hataları, uyarıları ve erişilebilirlik özelliklerini doğrudan sayfa üzerinde gösterir. Tasarımcılar ve içerik editörleri için anlaşılır bir arayüz sunar.

Klavye testi: Hiçbir araç, gerçek klavye ile navigasyon testinin yerini tutamaz. Fareyi bir kenara bırakıp yalnızca Tab, Shift+Tab ve Enter tuşlarıyla sitede ilerlemeyi deneyin.

Blakfy'nin web tasarımı projelerinde erişilebilirlik denetimi, site yayına alınmadan önce Lighthouse ve axe ile gerçekleştirilir; kritik AA ihlalleri tasarım aşamasında çözüme kavuşturulur.

⠀

⠀

Sık Sorulan Sorular

⠀

Web erişilebilirliği Türkiye'de yasal zorunluluk mu?

Kamu kurumları için e-Devlet mevzuatı kapsamında AA uyumu beklenmektedir. Özel sektör için şu an bağlayıcı bir zorunluluk bulunmamakla birlikte uluslararası projeler ve AB pazarı için hizmet veren şirketler Avrupa Erişilebilirlik Yasası (EAA) kapsamına girebilir.

Erişilebilirlik iyileştirmeleri sitenin görünümünü bozar mı?

Hayır, aksine iyileştirir. Erişilebilirlik gereksinimleri — yeterli kontrast, net başlık yapısı, odak göstergesi — iyi tasarımın zaten sahip olduğu özelliklerdir. Tasarım sürecinin başında dikkate alındığında ek maliyet yaratmaz.

Mevcut sitem için erişilebilirlik denetimini nereden başlatmalıyım?

Google Lighthouse ile başlayın: Chrome'da F12 tuşuna basın, Lighthouse sekmesine geçin ve Accessibility kategorisini çalıştırın. Çıkan rapordaki kritik hataları sırayla düzeltin; ardından axe ile daha derin bir analiz yapın.