Ana Sayfa Blog Web Sitesi Erişilebilirliği (Accessibility): WCAG Rehberi

Web Sitesi Erişilebilirliği (Accessibility): WCAG Rehberi

    Bu İçeriği Yapay Zeka (AI) ile Özetleyin:
    9 görüntülenme 7 dk okuma

    Web sitesi erişilebilirliği, engelli bireyler dahil tüm kullanıcıların web içeriklerine eşit erişimini sağlamak amacıyla uygulanan tasarım ve geliştirme standartlarının bütünüdür. WCAG (Web Content Accessibility Guidelines), bu alanda küresel referans noktasıdır ve 2026’da AA seviyesi uyumu yasal gereklilik haline gelen ülkelerin sayısı hızla artıyor. Türkiye’de kamu kurumları için erişilebilirlik zorunlu; özel sektörde ise kullanıcı tabanını genişletmenin ve yasal riskten korunmanın etkili bir yolu.

    WCAG Nedir ve Seviyeleri Nelerdir?

    WCAG (Web Content Accessibility Guidelines), W3C tarafından yayımlanan erişilebilirlik yönergelerinin kısaltmasıdır. Güncel versiyon WCAG 2.2’dir. Üç uyum seviyesi bulunur:

    • Level A: Temel gereklilikler; karşılanmazsa bazı kullanıcılar içeriğe hiç erişemez
    • Level AA: Standart yasal gereklilik; çoğu ülkede kamu siteleri için zorunlu
    • Level AAA: En yüksek standart; tüm içerik için karşılamak pratik değil, ancak belirli sayfalarda hedeflenebilir

    WCAG’ın 4 Temel İlkesi (POUR)

    1. Algılanabilir (Perceivable)

    İçerik tüm kullanıcılar tarafından algılanabilir olmalıdır. Görseller için alternatif metin (alt text) ekleyin; videolara altyazı ve ses açıklaması ekleyin; renk, içeriği iletmek için tek başına kullanılmamalıdır. “Kırmızı alanları doldurun” yerine “* ile işaretli alanları doldurun” ifadesi, renk körü kullanıcıları dışlamaz.

    2. Çalıştırılabilir (Operable)

    Arayüzün tüm işlevleri klavye ile kullanılabilmeli. Fare gerektiren öğeler — hover menüler, drag-and-drop — klavye alternatifi sunmalı. Dokunma hedefleri minimum 44x44px olmalı; kullanıcıya içeriği okumak ve işlemleri tamamlamak için yeterli zaman tanınmalı.

    3. Anlaşılabilir (Understandable)

    İçerik ve arayüz anlaşılır olmalı. Sayfa dili HTML’de tanımlı olmalı (lang=”tr”). Hata mesajları kullanıcıya ne yanlış yaptığını ve nasıl düzelteceğini açıklamalı. Navigasyon tutarlı olmalı: her sayfada aynı yerde aynı menü.

    4. Sağlam (Robust)

    İçerik, ekran okuyucular dahil çeşitli yardımcı teknolojiler tarafından doğru yorumlanabilmeli. Geçerli HTML kullanın; ARIA (Accessible Rich Internet Applications) rolleri ve etiketlerini doğru uygulayın.

    En Kritik WCAG AA Gereksinimleri

    GereklilikStandartAraç
    Metin kontrast oranıMin. 4,5:1 (normal metin)WebAIM Contrast Checker
    Büyük metin kontrastMin. 3:1 (18px+ bold)WebAIM Contrast Checker
    Görseller için alt textTüm bilgi taşıyan görsellerdeManuel kontrol
    Klavye erişimiTüm işlevler klavyeyle kullanılabilmeliManuel tab testi
    Focus görünürlüğüKlavye focus belirgin olmalıManuel test
    Video altyazısıTüm canlı ve kayıtlı videolardaManuel kontrol

    Alt Text Nasıl Yazılır?

    Alt text, görseli göremeyenlere görselin içeriğini ve amacını aktarmalıdır. İyi alt text için kurallar: görselin işlevini tanımlayın, “Bir görselin resmi” gibi gereksiz ifadelerden kaçının, dekoratif görseller için boş alt=”” kullanın. Örnekler: ❌ “resim.jpg” → ✅ “Wordline Agency web tasarım ekibi proje toplantısında” / ❌ “logo” → ✅ “Wordline Agency logosu”.

    Erişilebilirlik Test Araçları

    • axe DevTools: Chrome eklentisi; otomatik erişilebilirlik denetimi, WCAG seviyesi etiketli sonuçlar
    • WAVE: WebAIM’in ücretsiz online aracı; görsel olarak hataları sayfa üzerinde işaretler
    • Lighthouse: Chrome DevTools Accessibility sekmesi; erişilebilirlik skoru ve iyileştirme önerileri
    • Screen Reader Testi: NVDA (Windows, ücretsiz) veya VoiceOver (macOS, yerleşik) ile gerçek ekran okuyucu testi

    WordPress’te Erişilebilirlik

    WordPress 5.9’dan itibaren “Accessibility Ready” tema standartları güçlendirildi. Tema seçerken “accessibility-ready” etiketini filtreleyin. Görseller için Gutenberg editörü alt text alanı sunuyor; bu alanı boş bırakmayın. WP Accessibility Helper eklentisi, skip navigation linkleri ve aria etiketleri gibi erişilebilirlik iyileştirmelerini kod gerektirmeden ekliyor.

    Sonuç

    Web sitesi erişilebilirliği, hem etik bir sorumluluk hem stratejik bir iş kararıdır. WCAG AA uyumu, kullanıcı tabanınızı genişletir, SEO’ya katkıda bulunur ve olası yasal risklerden korur. Sitenizin erişilebilirlik denetimi ve WCAG AA uyum planı için Wordline Agency ile iletişime geçin.

    Erişilebilirlik ve SEO: Ortak Zemin

    Erişilebilirlik iyileştirmeleri çoğunlukla SEO’ya da doğrudan katkı sağlar. Bu iki disiplin aynı temel ilkeleri paylaşır: yapısal HTML, anlamlı içerik sıralaması ve semantik işaretleme. Aşağıdaki iyileştirmeler hem erişilebilirlik hem SEO için çift kazanım sağlar.

    • Alt text: Ekran okuyucuların görselleri anlamlandırması için gereklidir; Google’ın görselleri indexlemesi için de kritiktir.
    • Başlık hiyerarşisi (H1–H6): Ekran okuyucular sayfada H etiketleriyle gezinir; Google aynı yapıyı içerik hiyerarşisi için kullanır.
    • Anlamlı link metni: “Buraya tıklayın” yerine “Fiyat listesini inceleyin” hem ekran okuyucuyu hem Google’ı bilgilendirir.
    • Sayfa hızı: Yavaş sayfa, bilişsel güçlük yaşayan kullanıcılar için orantısız zorluk yaratır; Core Web Vitals’ı da olumsuz etkiler.
    • Mobil uyumluluk: Motor güçlüğü yaşayan kullanıcılar için büyük dokunma hedefleri zorunludur; mobil uyumluluk da Google’ın öncelikli değerlendirdiği faktörler arasındadır.

    Pratik Başlangıç Noktası: 30 Dakikada Temel Denetim

    Kapsamlı bir erişilebilirlik denetimi haftalar alabilir; ancak en kritik sorunların büyük bölümü 30 dakikada tespit edilebilir. Aşağıdaki hızlı denetim adımları teknik bilgi gerektirmez.

    1. axe DevTools eklentisini yükleyin (Chrome için ücretsiz) ve sitenizin ana sayfasında çalıştırın. “Kritik” ve “Ciddi” kategorisindeki sorunları listeleyin.
    2. Yalnızca Tab tuşuyla gezinin: Klavyenizle Tab’a basarak tüm sayfa boyunca ilerleyin. Focus hangi öğede olduğu her an görünür meli; kayboluyorsa sorun var.
    3. Tüm görsellerin alt text’ini kontrol edin: Chrome DevTools’ta Elements sekmesinden img etiketlerini inceleyin. Boş alt=”” olan görseller dekoratif mi gerçekten?
    4. Renk kontrastını test edin: WebAIM Contrast Checker’a marka renklerinizi girin. 4,5:1’in altındaki kombinasyonları not edin.
    5. Sayfada yalnızca bir H1 olduğunu doğrulayın: Birden fazla H1, hem erişilebilirlik hem SEO açısından sorunludur.

    Sık Sorulan Sorular

    WCAG AA uyumu yasal olarak zorunlu mu?

    Türkiye’de 5378 sayılı Engelliler Hakkında Kanun kapsamında kamu kurumlarına ait web siteleri için erişilebilirlik zorunludur. Özel sektör için şu an bağlayıcı bir zorunluluk bulunmamakla birlikte, AB’nin Web Erişilebilirlik Direktifi Avrupa pazarında faaliyet gösteren şirketleri etkiliyor. ABD’de ADA (Americans with Disabilities Act) kapsamında açılan davalar e-ticaret sitelerini de hedef almaktadır. Zorunluluktan bağımsız olarak erişilebilirlik riski azaltır, kullanıcı tabanını genişletir ve marka itibarını güçlendirir.

    WCAG AA ile WCAG AAA arasındaki fark nedir?

    WCAG üç uyum düzeyi tanımlar: A (temel), AA (standart) ve AAA (gelişmiş). Çoğu web sitesi için AA hedef standart olarak kabul edilir. AAA, daha katı gereksinimler içerir — örneğin metin kontrast oranı AA’da 4,5:1 iken AAA’da 7:1’dir. AAA uyumunu tüm site için sağlamak teknik ve tasarımsal açıdan çok zorlayıcı olduğundan; yüksek riskli içerik (sağlık bilgisi, acil durum iletişimi) için AAA uyumu hedeflenebilir, genel site için AA yeterlidir.

    Erişilebilirlik sonradan eklenebilir mi yoksa baştan planlanmalı mı?

    Her ikisi de mümkündür; ancak baştan planlamak çok daha az maliyetlidir. Mevcut bir siteye erişilebilirlik eklemek, genellikle sıfırdan erişilebilir tasarım yapmaktan 3–5 kat daha pahalıdır. Bununla birlikte, mevcut sitenizde erişilebilirlik çalışması başlatmak hiç yapmamaktan her zaman daha iyidir — kritik sorunlar öncelikli olarak düzeltilip kalan iyileştirmeler zaman içinde planlanabilir.

    Ekran okuyucular WordPress sitelerini doğru okur mu?

    Çoğu güncel WordPress sitesi, doğru tema ve içerik yapılandırmasıyla ekran okuyucularla uyumlu çalışır. Sorunlara yol açan durumlar: anlamsız ARIA rolleri, skip navigation linkinin yokluğu, Gutenberg bloklarında hatalı başlık hiyerarşisi ve görsellerde eksik alt text. WordPress Accessibility Team tarafından onaylanan “accessibility-ready” etiketli temalar bu riskleri büyük ölçüde azaltır. NVDA (ücretsiz, Windows) veya VoiceOver (macOS/iOS dahili) ile gerçek ekran okuyucu testi, otomatik araçların yakalayamadığı sorunları ortaya koyar.

    Neyi beğendiniz?
    Deneyiminiz hakkında daha fazla bilgi paylaşın.
    Devam etmek için onay vermelisiniz.

    Teşekkürler!

    Geri bildiriminiz başarıyla gönderildi. Katkılarınız gelişmemiz için çok değerli.

    WhatsApp'tan Yazın