Kısaca: Web erişilebilirliği, bir sitenin görme, işitme, hareket ya da bilişsel engeli olan kişiler dahil herkes tarafından kullanılabilmesidir. Standardı W3C’nin WCAG yönergeleridir. Başlamak için büyük bir bütçe gerekmez: yeterli renk kontrastı, görsellere anlamlı alt metin, etiketli form alanları, klavyeyle gezinme ve görünür odak, doğru başlık sırası ve sayfa dilinin belirtilmesi. WebAIM’in 2026 raporuna göre en popüler bir milyon ana sayfanın %95,9’unda bu temel hatalardan en az biri var.
Kısa cevap
Erişilebilirlik çoğu zaman “engelli kullanıcılar için ek bir iş” gibi görülür. Oysa erişilebilir bir site, güneş altında telefonuna bakan, kolu alçıda olan, yaşlı ebeveyni için form dolduran herkes için daha kullanışlıdır. Bu yazıda nereden başlayacağınızı, en sık yapılan hataları ve tasarım kararlarını etkileyen iki temel yasayı (Hick ve Fitts) anlatıyorum.
WCAG nedir?
WCAG (Web Content Accessibility Guidelines), W3C’nin web erişilebilirliği yönergeleridir; güncel sürümü WCAG 2.2’dir. Yönergeler dört ilke etrafında toplanır: algılanabilir (içerik görülebilir ya da duyulabilir), işletilebilir (klavyeyle de kullanılabilir), anlaşılabilir (dil ve davranış öngörülebilir) ve sağlam (farklı tarayıcı ve yardımcı teknolojilerle çalışır). Üç uyum seviyesi vardır: A, AA ve AAA. Çoğu düzenleme ve proje AA seviyesini hedefler.
En sık yapılan hatalar
WebAIM her yıl en popüler bir milyon web sitesinin ana sayfasını tarıyor. 2026 raporunda sayfa başına ortalama 56,1 hata bulundu ve bulunan hataların yaklaşık %96’sı aynı altı kategoriden geliyor (WebAIM). İyi haber şu: Bu altı hatanın hepsi tasarım ve kodlama aşamasında kolayca önlenebilir.
Nereden başlamalı? Altı temel adım
1. Renk kontrastı
Normal metin için en az 4,5:1, büyük metin için 3:1 kontrast. Ölçmeyi renk kontrastı yazısında anlattım.
2. Görsellere anlamlı alt metin
Alt metin, görseli göremeyen biri için görselin yerini tutan metindir. Ekran okuyucular onu sesli okur; görsel yüklenemediğinde de görünür. İyi alt metin yazmanın kuralları:
- Görselin ne gösterdiğini değil, sayfadaki işlevini anlatın: Bir ürün görseli için ürünün adı ve ayırt edici özelliği.
- “Resim”, “görsel” gibi kelimelerle başlamayın; ekran okuyucu zaten bunun bir görsel olduğunu söyler.
- Görselin içinde metin varsa o metni alt metne yazın.
- Yalnızca süs amaçlı görsellerde alt metni boş bırakın (
alt=""); böylece ekran okuyucu onları atlar. - Bağlantı olarak kullanılan bir görselin alt metni, bağlantının nereye gittiğini söylemeli.
W3C’nin alt metin karar ağacı, hangi durumda ne yazacağınıza karar vermenizi kolaylaştırır (W3C).
3. Form alanlarına etiket
Her form alanının görünür ve kodda alana bağlı bir etiketi olmalı. Placeholder etiket değildir. Ayrıntılar buton ve form tasarımı yazısında.
4. Klavyeyle gezinme ve görünür odak
Fare kullanamayan pek çok kişi siteyi klavyeyle (Tab, Shift+Tab, Enter, boşluk) gezer. Basit bir test yapın: Faresiz, yalnızca Tab tuşuyla sitenizin ana görevini tamamlayabiliyor musunuz? Her adımda hangi öğede olduğunuzu görebiliyor musunuz? Odak çerçevesini CSS’te kaldırmak (outline: none) en yaygın hatalardan biridir; kaldıracaksanız yerine daha belirgin bir odak stili koyun.
5. Anlamlı başlık yapısı ve bağlantı metni
Ekran okuyucu kullananlar sayfayı çoğunlukla başlıklar arasında atlayarak gezer. Sayfada tek bir H1 olsun ve başlıklar sırasını atlamasın (H2’den sonra H4’e geçmeyin). Bağlantı metinleri tek başına okunduğunda anlamlı olmalı: “Buraya tıklayın” yerine “Teklif formunu açın”. İkon butonlarına ve ikon bağlantılarına aria-label ile bir ad verin; aksi hâlde ekran okuyucu “buton” der ve susar.
6. Sayfa dili
HTML etiketinde lang="tr" belirtmek, ekran okuyucunun metni Türkçe telaffuzla okumasını sağlar. Aynı ayar, font yazısında anlattığım i/İ büyük harf sorununu da çözer.
Hick ve Fitts yasaları
Bu iki yasa erişilebilirlik standardı değil, insan-bilgisayar etkileşiminin temel bulgularıdır. Ama herkes için kullanılabilir arayüz kurarken sürekli karşınıza çıkarlar.
Hick yasası: seçenek arttıkça karar uzar
Hick-Hyman yasasına göre bir karar vermek için gereken süre, seçenek sayısı arttıkça artar (Laws of UX). Menüde 15 öğe, bir sayfada 6 eşit ağırlıkta buton ya da 40 seçenekli bir açılır liste, kullanıcıyı yavaşlatır. Çözüm seçenekleri azaltmak, gruplamak ve önerilen seçeneği öne çıkarmaktır.
Fitts yasası: büyük ve yakın hedef kolaydır
Fitts yasasına göre bir hedefe ulaşma süresi, hedefin uzaklığı arttıkça artar, boyutu büyüdükçe azalır (Laws of UX). Pratik sonuçları: Ana butonlar büyük olsun, ilgili eylemler birbirine yakın dursun, mobilde sık kullanılan butonlar başparmağın rahat ulaştığı alt bölgede yer alsın. WCAG 2.2’nin dokunma alanı kuralı da bu yasanın erişilebilirlik karşılığıdır. Buton tasarımı yazısında bu ölçüleri ele aldım.
Erişilebilirliği nasıl test edersiniz?
- Otomatik araçlar: WebAIM’in ücretsiz WAVE eklentisi ve Chrome’daki Lighthouse, sorunların bir kısmını bulur. Ama otomatik araçlar tüm sorunları yakalayamaz.
- Klavye testi: Fareyi bırakıp sitenin ana görevlerini Tab tuşuyla tamamlayın.
- Yakınlaştırma testi: Tarayıcıda %200 yakınlaştırın; içerik kesiliyor ya da üst üste biniyor mu?
- Ekran okuyucu: Mac’te VoiceOver, Windows’ta ücretsiz NVDA ile sayfanızı bir kez dinleyin. Başlıkların ve butonların nasıl okunduğunu duymak çok öğreticidir.
Yasal durum
Avrupa Birliği’nde Avrupa Erişilebilirlik Yasası Haziran 2025’ten bu yana e-ticaret ve bankacılık gibi birçok özel sektör hizmetini kapsıyor; AB’ye satış yapan Türk şirketlerini de ilgilendirebilir. Türkiye’de kamu kurumlarının internet siteleri için erişilebilirlik ölçütleri bulunuyor. Projenize hangi kuralların uygulandığı konusunda kesin bilgi için bir hukukçuya danışın.
Sık sorulan sorular
Erişilebilirlik eklentisi (overlay) kurmak yeterli mi?
Hayır. Sayfaya bir araç çubuğu ekleyen bu tür eklentiler, sitenin kodundaki sorunları çözmez; kontrastı, alt metinleri, form etiketlerini ve klavye erişimini sitenin kendisinde düzeltmek gerekir. Pek çok erişilebilirlik uzmanı bu araçların kullanıcı deneyimini kötüleştirebildiğini de belirtiyor.
Erişilebilirlik SEO’yu etkiler mi?
Dolaylı olarak evet. Alt metinler, doğru başlık yapısı ve anlamlı bağlantı metinleri hem ekran okuyucuların hem arama motorlarının ve yapay zeka araçlarının sayfayı anlamasını kolaylaştırır.
Küçük bir site için de gerekli mi?
Evet, ve küçük sitede çok daha kolaydır. Yukarıdaki altı adım, bir kurumsal site için birkaç saatlik bir iş olabilir; sonradan düzeltmek ise her zaman daha pahalıdır.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır. Yasal konularda kesin bilgi için bir avukata danışın.
