Web Erişilebilirlik (WCAG) Nedir
ve Neden Önemli?

Web Erişilebilirlik Nedir?

Web erişilebilirlik (a11y), web içeriklerinin engelli bireyler — görme, işitme, motor ve bilişsel engelli kullanıcılar — tarafından algılanabilir, kullanılabilir ve anlaşılabilir olmasını sağlayan tasarım ve geliştirme prensipleridir.

Dünya Sağlık Örgütü verilerine göre dünya nüfusunun yaklaşık %16'sı bir tür engelle yaşıyor. Bu, web sitenizi erişilebilir kılmadığınızda potansiyel ziyaretçilerinizin önemli bir bölümünü dışarıda bıraktığınız anlamına gelir.

Erişilebilirlik sadece engelli kullanıcılar için değil, herkes için faydalıdır:

• Yaşlı kullanıcılar: Büyük fontlar, yüksek kontrast ve basit navigasyon
• Geçici engel yaşayanlar: Kırık kol, göz ameliyatı sonrası
• Durumsal kısıtlamalar: Güneş altında ekran okuma, gürültülü ortamda video izleme
• Yavaş internet bağlantısı: Alternatif metin, hafif sayfalar

WCAG 2.2 Nedir?

WCAG (Web Content Accessibility Guidelines), W3C tarafından geliştirilen uluslararası web erişilebilirlik standartlarıdır. 2023'te yayınlanan WCAG 2.2, en güncel versiyondur ve 4 temel prensip üzerine kurulmuştur:

• Algılanabilirlik (Perceivable): İçerik tüm kullanıcılar tarafından algılanabilir olmalı — metin alternatifleri, altyazılar, yeterli kontrast
• Kullanılabilirlik (Operable): Arayüz bileşenleri ve navigasyon kullanılabilir olmalı — klavye erişimi, yeterli zaman, nöbet tetiklemeyen içerik
• Anlaşılabilirlik (Understandable): İçerik ve arayüz anlaşılır olmalı — okunabilir metin, öngörülebilir davranış, hata yardımı
• Sağlamlık (Robust): İçerik yardımcı teknolojiler dahil çeşitli kullanıcı ajanları tarafından güvenilir şekilde yorumlanabilir olmalı

Erişilebilirlik Seviyeleri: A, AA, AAA

WCAG kriterleri üç uyumluluk seviyesinde sınıflandırılır. Her seviye bir öncekini kapsayarak daha yüksek erişilebilirlik sağlar:

Engel Türleri ve Web Etkileşimi

Farklı engel türleri, kullanıcıların web ile etkileşim biçimini farklı şekillerde etkiler:

Görme Engelli Kullanıcılar

Tamamen görme kaybı yaşayan kullanıcılar ekran okuyucu yazılımları (JAWS, NVDA, VoiceOver) kullanır. Düşük görme kapasitesine sahip kullanıcılar ise ekran büyütme, yüksek kontrast modları ve özelleştirilmiş renk şemaları tercih eder.

• Her görselde anlamlı alt metni bulunmalı
• Dekoratif görseller için alt="" kullanılmalı
• Semantik HTML başlık hiyerarşisi (h1 → h6) korunmalı
• Form alanları <label> etiketleriyle ilişkilendirilmeli

İşitme Engelli Kullanıcılar

Video ve ses içeriklerinde altyazı ve transkript sunulması zorunludur. Sadece sesle iletilen bilgi (örn. uyarı sesleri) görsel alternatiflerle desteklenmelidir.

Motor Engelli Kullanıcılar

Fare kullanamayan veya sınırlı hareket kabiliyetine sahip kullanıcılar, klavye, ses komutu veya göz izleme gibi alternatif giriş cihazları kullanır. Bu nedenle tüm etkileşimli öğeler klavyeyle erişilebilir olmalıdır.

Klavye Navigasyonu

Web erişilebilirliğin en kritik bileşenlerinden biri klavye navigasyonudur. Motor engelli kullanıcılar, ekran okuyucu kullananlar ve hatta power user'lar klavyeyle gezinir.

Klavye erişilebilirliği için kontrol listesi:

• Tab sırası mantıklı mı? Sayfa elemanları görsel sıraya uygun şekilde tab ile gezilebilmeli
• Focus göstergesi görünür mü? :focus-visible stili her etkileşimli elemanda tanımlı olmalı
• Klavye tuzağı var mı? Modal, dropdown gibi bileşenlerde kullanıcı klavyeyle sıkışıp kalmamalı
• Skip link mevcut mu? Sayfa başında "Ana içeriğe geç" bağlantısı ekran okuyucu ve klavye kullanıcıları için önemli
• Özel bileşenler klavyeyle çalışıyor mu? Tab, accordion, carousel gibi öğeler Enter/Space/Arrow tuşlarıyla kontrol edilebilmeli

Ekran Okuyucu Uyumu

Ekran okuyucular, sayfadaki HTML yapısını yorumlayarak kullanıcıya sesli geri bildirim verir. Bu nedenle HTML'in semantik ve doğru yapılandırılmış olması kritiktir.

Semantik HTML Kullanımı

Semantik etiketler ekran okuyuculara sayfa yapısını anlatır:

• <nav> — Navigasyon bölgesi
• <main> — Ana içerik alanı
• <header> ve <footer> — Sayfa/bölüm üstbilgi ve altbilgi
• <article> — Bağımsız içerik birimi
• <section> — Tematik içerik grubu
• <aside> — Yan içerik, kenar çubuğu

<div> ve <span> kullanmak yerine her zaman anlamsal karşılığı olan etiketi tercih edin. "Div çorbası" (div soup) ekran okuyucular için anlamsız bir yapıdır.

Renk Kontrastı ve Görsel Erişilebilirlik

Renk kontrastı, düşük görme kapasitesine sahip kullanıcılar ve renk körlüğü olan bireyler için kritik öneme sahiptir.

Renk kontrastı dışında dikkat edilmesi gereken diğer görsel erişilebilirlik kuralları:

• Bilgiyi sadece renkle iletmeyin: Hata mesajlarında kırmızı rengin yanında ikon veya metin de kullanın
• Metin yeniden boyutlandırılabilir olmalı: %200'e kadar büyütmede sayfa kullanılabilir kalmalı
• Yanıp sönen içerikten kaçının: Saniyede 3'ten fazla yanıp sönme epileptik nöbet tetikleyebilir

ARIA Attribute'ları

ARIA (Accessible Rich Internet Applications), HTML'in yeterli olmadığı durumlarda yardımcı teknolojilere ek bilgi sağlayan attribute'lardır. Ancak ARIA'nın ilk kuralı: "Mümkünse ARIA kullanmayın — semantik HTML yeterlidir."

ARIA'nın doğru kullanıldığı durumlar:

• aria-label: Görsel metni olmayan etkileşimli öğeler için (ikon butonları, hamburger menü)
• aria-expanded: Açılır/kapanır bileşenlerin durumunu belirtir (accordion, dropdown)
• aria-hidden="true": Dekoratif öğeleri ekran okuyucudan gizler
• aria-live: Dinamik olarak güncellenen içeriği ekran okuyucuya bildirir (toast bildirimler, canlı arama sonuçları)
• role: Özel bileşenlere semantik rol atar (role="tablist", role="dialog")

Yasal Gereklilikler

Web erişilebilirlik pek çok ülkede yasal bir zorunluluktur:

• Avrupa Birliği — European Accessibility Act (EAA): 2025'ten itibaren dijital ürün ve hizmetlerde erişilebilirlik zorunlu
• ABD — ADA (Americans with Disabilities Act): Web siteleri de "kamu hizmeti alanı" sayılıyor; ihlaller dava konusu
• Türkiye — 5378 sayılı Engelliler Kanunu: Kamu web siteleri için erişilebilirlik zorunluluğu
• Türkiye — e-Devlet Kapısı Erişilebilirlik Yönetmeliği: Kamusal dijital hizmetlerde WCAG 2.0 AA uyumu

Yasal zorunlulukların ötesinde, erişilebilirlik ticari bir avantajdır. Erişilebilir siteler daha geniş kitleye ulaşır, SEO performansı daha yüksektir ve kullanıcı memnuniyeti artar.

Erişilebilirlik Test Araçları

Web sitenizin erişilebilirliğini test etmek için kullanabileceğiniz araçlar:

• Lighthouse (Chrome DevTools): Google'ın ücretsiz erişilebilirlik denetim aracı — performans, SEO ve erişilebilirlik skorunu tek seferde verir
• WAVE (WebAIM): Sayfa üzerinde görsel olarak erişilebilirlik hatalarını işaretler
• axe DevTools: Geliştiriciler için detaylı erişilebilirlik analizi — CI/CD entegrasyonu mümkün
• Colour Contrast Analyser: Renk kontrastı oranını ölçen masaüstü uygulama
• Ekran okuyucu testi: NVDA (Windows, ücretsiz), VoiceOver (macOS/iOS, dahili), TalkBack (Android, dahili)
• Klavye testi: Fareyi bırakın, sadece Tab, Enter, Space ve ok tuşlarıyla gezinin

Erişilebilirlik ve SEO İlişkisi

Erişilebilirlik ve SEO şaşırtıcı derecede örtüşür. Google'ın arama botları, bir anlamda "görme engelli bir kullanıcı" gibi sitenizi tarar — görselleri göremez, JavaScript'i sınırlı çalıştırır ve yapısal HTML'e dayanır.

Erişilebilirlik iyileştirmelerinin SEO'ya katkıları:

• Alt text: Görsellerin arama motorları tarafından anlaşılmasını sağlar
• Başlık hiyerarşisi: Google içerik yapısını anlar, öne çıkan snippet'larda gösterir
• Semantik HTML: Arama motorları sayfa bölümlerini doğru yorumlar
• Sayfa hızı: Erişilebilir siteler genellikle daha hafif ve hızlı — Google bunu ödüllendirir
• Mobil uyumluluk: Dokunmatik hedef boyutu, okunabilir fontlar, uyumlu düzen

Erişilebilirlik Kontrol Listesi

Sitenizde hemen kontrol edebileceğiniz temel erişilebilirlik noktaları:

• <html lang="tr"> tanımlı mı? Ekran okuyucunun doğru dilde okuması için şart
• Her görselde alt text var mı? Dekoratif görsellerde alt="" kullanılıyor mu?
• Renk kontrastı 4.5:1 minimum mı? Tüm metin-arka plan kombinasyonlarında
• Klavyeyle tüm sayfa gezilebiliyor mu? Tab sırası mantıklı mı, focus göstergesi görünür mü?
• Form alanlarında label var mı? Placeholder label yerine geçmez
• Başlık hiyerarşisi doğru mu? H1 → H2 → H3 sırası atlama olmadan
• Video/ses içeriğinde altyazı var mı?
• Dokunma hedefleri en az 44x44px mi? Mobilde tıklanabilir alanlar yeterli büyüklükte mi?
• Hata mesajları açık ve yardımcı mı? Sadece "Hata oluştu" yetmez
• Animasyonlar devre dışı bırakılabiliyor mu? prefers-reduced-motion media query'si destekleniyor mu?

Sonuç: Erişilebilirlik Lüks Değil, Gereklilik

Web erişilebilirlik "bonus bir özellik" değil, web tasarımın temel bir parçasıdır. Erişilebilir bir site daha geniş bir kitleye ulaşır, daha iyi SEO performansı gösterir, yasal gerekliliklere uyar ve kullanıcı deneyimini herkes için iyileştirir.

Erişilebilirlik mükemmelliğe ulaşmak bir maraton — ama her küçük adım önemlidir. Bugün alt text eklemek, yarın klavye navigasyonunu düzeltmek, gelecek hafta kontrast oranlarını iyileştirmek — her birisi web'i daha kapsayıcı bir yer yapar.