Web Sitesi Erişilebilirliği Rehberi: WCAG 2.2 ve Türkiye Uyumu

Türkiye'de 8,5 milyon engelli vatandaş bulunuyor ve web sitelerinin %96'sı en az bir erişilebilirlik hatası içeriyor. 2025 yılında yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi ile web sitelerinde ve mobil uygulamalarda erişilebilirlik artık yasal bir zorunluluk haline geldi.

Bu kapsamlı rehberde WCAG 2.2 standartlarını, Türkiye'deki yasal gereklilikleri ve web sitenizi herkes için erişilebilir hale getirmek için atmanız gereken pratik adımları bulacaksınız.

Web Erişilebilirliği Nedir?

Web erişilebilirliği, web sitelerinin ve uygulamaların engelli bireyler dahil herkes tarafından kullanılabilir olmasını sağlama sürecidir. Bu, görme, işitme, motor ve bilişsel engelli kullanıcıların web içeriklerine eşit şekilde erişebilmesini ifade eder.

Erişilebilirlik kimler için önemli?

• Görme engelli kullanıcılar: Ekran okuyucu kullanan kör bireyler veya düşük görüş kapasiteli kullanıcılar
• İşitme engelli kullanıcılar: Videolarda altyazı ihtiyacı duyan sağır veya işitme güçlüğü yaşayan bireyler
• Motor engelli kullanıcılar: Fare kullanamayan, sadece klavye ile gezinebilen bireyler
• Bilişsel engelli kullanıcılar: Okuma güçlüğü, dikkat eksikliği veya öğrenme güçlüğü yaşayan bireyler
• Yaşlı kullanıcılar: Yaşa bağlı görme, işitme veya motor beceri kaybı yaşayan bireyler
• Geçici engelli kullanıcılar: Kırık kol, göz ameliyatı sonrası gibi geçici durumlar

2025/10 Sayılı Erişilebilirlik Genelgesi

21 Haziran 2025 tarihinde yayımlanan "Web Siteleri ve Mobil Uygulamaların Erişilebilirliği" konulu Cumhurbaşkanlığı Genelgesi, dijital erişilebilirlik konusunda önemli yükümlülükler getirmektedir.

Genelge Kapsamı

• Kamu kurumları: Tüm bakanlıklar, belediyeler, üniversiteler ve kamu kuruluşları
• Özel sektör: Ticari web siteleri ve mobil uygulamalar
• Hedef standart: WCAG 2.2 AA seviyesi uyumu

Uyum Süreleri

Yaptırımlar

Genelgeye uyumsuzluk durumunda:

• İdari para cezaları
• Web sitesinin erişime kapatılması riski
• Ayrımcılık davalarına maruz kalma
• İtibar kaybı

WCAG 2.2 Standartları

WCAG (Web Content Accessibility Guidelines), W3C tarafından geliştirilen uluslararası web erişilebilirlik standartlarıdır. 2023 yılında yayımlanan WCAG 2.2, en güncel sürümdür.

Dört Temel Prensip (POUR)

1. Algılanabilir (Perceivable)

İçerik, kullanıcıların en az bir duyusu ile algılayabileceği şekilde sunulmalıdır.

• Görsellere alternatif metin (alt text) eklenmeli
• Videolara altyazı ve sesli betimleme sağlanmalı
• Renk tek başına bilgi iletme aracı olmamalı
• Metin boyutu ayarlanabilir olmalı

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

Kullanıcı arayüzü bileşenleri ve navigasyon çalıştırılabilir olmalıdır.

• Tüm işlevler klavye ile erişilebilir olmalı
• Kullanıcılara yeterli zaman tanınmalı
• Nöbet tetikleyici içeriklerden kaçınılmalı
• Navigasyon tutarlı ve öngörülebilir olmalı

3. Anlaşılır (Understandable)

İçerik ve arayüz işleyişi anlaşılır olmalıdır.

• Metin okunabilir ve anlaşılır olmalı
• Web sayfaları öngörülebilir şekilde çalışmalı
• Hata önleme ve düzeltme mekanizmaları bulunmalı
• Yardım ve dokümantasyon sağlanmalı

4. Sağlam (Robust)

İçerik, yardımcı teknolojiler dahil farklı kullanıcı araçlarıyla uyumlu olmalıdır.

• Geçerli HTML kullanılmalı
• ARIA rolleri doğru uygulanmalı
• Yardımcı teknolojilerle uyumluluk test edilmeli

Uyum Seviyeleri

WCAG üç uyum seviyesi tanımlar:

Türkiye Genelgesi AA seviyesini hedeflemektedir.

Pratik Uygulama Kontrol Listesi

Web sitenizi erişilebilir hale getirmek için aşağıdaki kontrol listesini kullanın:

1. Görsel İçerik

• Tüm görsellere açıklayıcı alt text ekleyin
• Dekoratif görsellere boş alt="" atayın
• Karmaşık görseller için uzun açıklama sağlayın
• Renk kontrastı en az 4.5:1 olmalı (normal metin)
• Büyük metin için kontrast en az 3:1 olmalı

Alt text yazma kuralları:

<!-- İyi örnek -->
<img src="ceo.jpg" alt="Şirket CEO'su Ahmet Yılmaz, 2025 stratejisini sunuyor">

<!-- Kötü örnek -->
<img src="ceo.jpg" alt="resim">

<!-- Dekoratif görsel -->
<img src="decoration.svg" alt="">

2. Klavye Navigasyonu

• Tüm etkileşimli öğeler Tab ile erişilebilir
• Odak göstergesi (focus indicator) görünür
• Skip link ile ana içeriğe atlama mümkün
• Mantıklı tab sırası (tabindex kullanımı)
• Klavye tuzakları yok (modal kapanabilir)

Skip link örneği:

<a href="#main-content" class="skip-link">
  Ana içeriğe atla
</a>

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
}

3. Form Erişilebilirliği

• Her form alanına label etiketleme
• Hata mesajları açık ve yardımcı
• Zorunlu alanlar belirtilmiş
• Otomatik düzeltme önerileri
• Form grupları fieldset/legend ile organize

Erişilebilir form örneği:

<form>
  <div>
    <label for="email">E-posta adresi (zorunlu)</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint"
    >
    <span id="email-hint">Örn: isim@domain.com</span>
  </div>
</form>

4. Semantik HTML

• Başlık hiyerarşisi doğru (h1 > h2 > h3)
• Listeler ul/ol/dl ile işaretlenmiş
• Tablolar th ve caption içeriyor
• Landmark rolleri kullanılıyor (nav, main, footer)
• Sayfa dili lang özelliği ile belirtilmiş

Semantik yapı örneği:

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>Sayfa Başlığı | Site Adı</title>
</head>
<body>
  <header role="banner">
    <nav aria-label="Ana menü">...</nav>
  </header>

  <main id="main-content" role="main">
    <h1>Sayfa Ana Başlığı</h1>
    <article>...</article>
  </main>

  <footer role="contentinfo">...</footer>
</body>
</html>

5. Multimedya İçerik

• Videolara Türkçe altyazı
• Ses içerikler için transkript
• Otomatik oynatma yok veya durdurulabilir
• Ses kontrolü mevcut
• Sesli betimleme (audio description) seçeneği

6. Mobil Erişilebilirlik

• Dokunma hedefleri en az 44x44 piksel
• Pinch-to-zoom engellenmemiş
• Yatay kaydırma gerektirmiyor
• Konum değişikliği bildiriliyor
• Gesture alternatifleri mevcut

Erişilebilirlik Test Araçları

Web sitenizin erişilebilirliğini test etmek için şu araçları kullanabilirsiniz:

Otomatik Test Araçları

Manuel Test Adımları

1. Klavye testi: Fareyi kullanmadan tüm siteyi gezin
2. Ekran okuyucu testi: NVDA (ücretsiz) veya VoiceOver ile test edin
3. Zoom testi: Sayfayı %200 yakınlaştırın, kullanılabilirliği kontrol edin
4. Renk körlüğü simülasyonu: Chrome DevTools > Rendering > Emulate vision deficiencies

Lighthouse Erişilebilirlik Skoru

Chrome DevTools'ta Lighthouse sekmesinden erişilebilirlik denetimi yapabilirsiniz:

1. F12 ile DevTools'u açın
2. Lighthouse sekmesine gidin
3. "Accessibility" seçeneğini işaretleyin
4. "Analyze page load" butonuna tıklayın

Hedef skor: 90+

Yaygın Erişilebilirlik Hataları ve Çözümleri

1. Eksik Alt Text

Sorun: Görsellerde alternatif metin yok

Çözüm:

<!-- Öncesi -->
<img src="urun.jpg">

<!-- Sonrası -->
<img src="urun.jpg" alt="Mavi renkli kablosuz kulaklık, yan görünüm">

2. Düşük Renk Kontrastı

Sorun: Metin ve arka plan arasında yetersiz kontrast

Çözüm:

/* Öncesi - Kontrast: 2.5:1 (yetersiz) */
.text {
  color: #999;
  background: #fff;
}

/* Sonrası - Kontrast: 4.6:1 (yeterli) */
.text {
  color: #666;
  background: #fff;
}

3. Boş Link Metni

Sorun: Linkler yalnızca ikon içeriyor, metin yok

Çözüm:

<!-- Öncesi -->
<a href="/sepet">
  <svg>...</svg>
</a>

<!-- Sonrası -->
<a href="/sepet" aria-label="Sepete git">
  <svg aria-hidden="true">...</svg>
</a>

4. Odak Göstergesi Kaldırılmış

Sorun: outline: none ile odak göstergesi gizlenmiş

Çözüm:

/* Öncesi (yanlış) */
button:focus {
  outline: none;
}

/* Sonrası (doğru) */
button:focus-visible {
  outline: 2px solid #FFB800;
  outline-offset: 2px;
}

5. Başlık Hiyerarşisi Bozuk

Sorun: h1'den h4'e atlama, h2 atlanmış

Çözüm:

<!-- Öncesi (yanlış) -->
<h1>Ana Başlık</h1>
<h4>Alt Başlık</h4>

<!-- Sonrası (doğru) -->
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>

ARIA Kullanım Rehberi

ARIA (Accessible Rich Internet Applications), HTML'in yetersiz kaldığı durumlarda erişilebilirlik bilgisi eklemeye yarar.

Temel ARIA Rolleri

<!-- Navigasyon -->
<nav role="navigation" aria-label="Ana menü">...</nav>

<!-- Arama -->
<form role="search" aria-label="Site araması">...</form>

<!-- Alert -->
<div role="alert">İşlem başarılı!</div>

<!-- Dialog/Modal -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Onay</h2>
  ...
</div>

ARIA Kuralları

1. Önce semantik HTML kullanın: ARIA olmadan çözülebiliyorsa HTML kullanın
2. Rolleri değiştirmeyin: <button role="link"> yerine <a> kullanın
3. Gizli içeriği işaretleyin: aria-hidden="true" dekoratif öğeler için
4. Durumları bildirin: aria-expanded, aria-selected, aria-checked

Erişilebilirlik ve SEO İlişkisi

Erişilebilirlik optimizasyonları aynı zamanda SEO'yu da iyileştirir:

Erişilebilir bir site, Google'ın içeriğinizi daha iyi anlamasını sağlar. Core Web Vitals rehberimizde performans optimizasyonu hakkında daha fazla bilgi bulabilirsiniz.

Uygulama Yol Haritası

Web sitenizi erişilebilir hale getirmek için önerilen adımlar:

Faz 1: Denetim (1-2 Hafta)

1. Lighthouse ve WAVE ile otomatik tarama
2. Manuel klavye testi
3. Hata envanteri çıkarma
4. Önceliklendirme (kritik > yüksek > orta > düşük)

Faz 2: Kritik Düzeltmeler (2-4 Hafta)

1. Eksik alt textler ekleme
2. Renk kontrastı düzeltme
3. Klavye navigasyonu sağlama
4. Form etiketleme

Faz 3: İyileştirmeler (4-8 Hafta)

1. ARIA implementasyonu
2. Video altyazıları
3. Skip link ekleme
4. Hata mesajları geliştirme

Faz 4: Sürdürme (Sürekli)

1. Yeni içerik denetimi
2. Düzenli test döngüsü
3. Erişilebilirlik bildirimi yayımlama
4. Kullanıcı geri bildirimlerini toplama

Erişilebilirlik Bildirimi

Türkiye Genelgesi gereği web sitelerinde erişilebilirlik bildirimi yayımlanmalıdır. Bildirim şunları içermelidir:

• Uyum düzeyi (A, AA, AAA)
• Uyumsuz içerikler ve nedenleri
• Erişilebilirlik sorunu bildirme yöntemi
• İletişim bilgileri
• Bildirim tarihi

Örnek erişilebilirlik bildirimi sayfası: /erisilebilirlik-bildirimi

Sıkça Sorulan Sorular

Erişilebilirlik sadece görme engelliler için mi önemli?

Hayır. Erişilebilirlik tüm engel türleri için geçerlidir: görme, işitme, motor ve bilişsel engeller. Ayrıca geçici engel durumları (kırık kol, göz ameliyatı) ve yaşlı kullanıcılar için de kritiktir.

WCAG 2.2 ile WCAG 2.1 arasındaki fark nedir?

WCAG 2.2, 2023'te yayımlandı ve 9 yeni başarı kriteri ekledi. Bunlar özellikle mobil erişilebilirlik, bilişsel erişilebilirlik ve kimlik doğrulama konularına odaklanıyor. Türkiye Genelgesi WCAG 2.2 AA seviyesini hedefliyor.

Erişilebilirlik maliyetli mi?

Baştan erişilebilir tasarım yapmak ek maliyet getirmez. Mevcut siteyi uyumlu hale getirmek daha maliyetli olabilir, ancak yasal yaptırımlar ve potansiyel davalardan çok daha ekonomiktir.

WordPress sitelerde erişilebilirlik nasıl sağlanır?

Erişilebilir tema seçimi, eklenti optimizasyonu, alt text ekleme ve form plugin'lerinin doğru yapılandırılması ile sağlanabilir. Astra, GeneratePress gibi temalar erişilebilirlik odaklıdır.

Tek sayfalık sitelerde (SPA) erişilebilirlik nasıl sağlanır?

React, Vue gibi framework'lerde ARIA live regions ile dinamik içerik değişikliklerini bildirmek, odak yönetimi yapmak ve route değişikliklerinde sayfa başlığını güncellemek gerekir.

Erişilebilirlik testini kim yapmalı?

İdeal olarak hem otomatik araçlar hem de gerçek engelli kullanıcılarla test yapılmalıdır. Ayrıca ekran okuyucu deneyimi olan erişilebilirlik uzmanlarından denetim alınabilir.

Sonuç

Web erişilebilirliği artık sadece iyi niyet değil, Türkiye'de yasal bir zorunluluktur. 2025/10 sayılı Genelge ile kamu kurumlarına 1 yıl, özel sektöre 2 yıl süre tanınmıştır.

Erişilebilir bir web sitesi:

• 8,5 milyon engelli vatandaşa hizmet sunar
• SEO performansını artırır
• Yasal riskleri azaltır
• Marka itibarını güçlendirir
• Daha geniş bir kitleye ulaşır

Erişilebilirlik yolculuğunuzda yardım almak için iletişime geçin veya proje teklif formumuzu doldurun. WCAG 2.2 uyumlu, herkes için erişilebilir web siteleri tasarlıyoruz.