Türkiye'de Görme Engelli Kullanıcılar İçin Web Tasarım Rehberi (2026)

Türkiye'de Görme Engelli Kullanıcılar İçin Web Tasarım Rehberi (2026)

Kısa cevap: Türkiye'de TÜİK 2022 verilerine göre nüfusun yaklaşık %12.8'i bir engelle yaşıyor; görme engelli kullanıcı sayısı 1 milyonun üzerinde. Bu kullanıcıların büyük bölümü NVDA, JAWS veya VoiceOver gibi ekran okuyucu kullanır. Bir web sitesinin görme engelli kullanıcılara erişilebilir olması için semantik HTML, ARIA landmarks, doğru alt metinler, WCAG AA kontrast oranı (4.5:1) ve tam klavye navigasyonu gerekir. Aşağıda her bir başlık için pratik kod örnekleri ve test yöntemleri bulacaksınız.

İçindekiler

• Türkiye'de görme engelli kullanıcı profili
• Ekran okuyucu nasıl çalışır?
• Semantik HTML — temel kural
• ARIA landmarks
• Alt text en iyi pratikler
• Kontrast oranı — WCAG AA / AAA
• Klavye navigasyonu
• Türkçe NVDA kurulumu ve kullanımı
• Erişilebilir Çerez widget profilleri ile pratik destek
• Sıkça Sorulan Sorular

Türkiye'de görme engelli kullanıcı profili

TÜİK 2022 Engelli İstatistikleri'ne göre Türkiye'de:

• Toplam engelli birey: ~%12.8 (10 milyon+)
• Görme engelli: 1 milyondan fazla
• Ağır görme kaybı: 250 bin civarı
• Orta düzey kayıp: 750 bin civarı
• Yaşlılık kaynaklı görme zorluğu: 65+ yaş grubunun %35'inden fazlasında

Bu kullanıcıların çoğunluğu akıllı telefon + bilgisayar üzerinden internet kullanır. Sosyal medya, e-bankacılık, e-devlet, e-ticaret gibi servisler erişilebilir olduğunda bağımsız olarak işlemlerini tamamlayabilirler.

Ekran okuyucu nasıl çalışır?

Ekran okuyucu, ekrandaki içeriği sentetik ses ile okuyan bir yazılımdır. Tarayıcı + işletim sistemi + ekran okuyucu üçlüsü birlikte çalışır:

• NVDA (Windows, ücretsiz, açık kaynak) — Türkiye'de en yaygın
• JAWS (Windows, ücretli) — kurumsal kullanımda yaygın
• VoiceOver (macOS / iOS, dahili)
• TalkBack (Android, dahili)

Ekran okuyucu, HTML'in DOM ağacını + accessibility tree'sini birlikte okur. Bu sebeple <div onclick> ile yapılmış bir buton, ekran okuyucu için görünmez olabilir — ama <button> etiketi otomatik olarak "düğme" olarak okunur.

Semantik HTML — temel kural

Ekran okuyucu için en kritik kural: doğru HTML etiketi. CSS ile görsel olarak aynı görünen iki öğe, ekran okuyucu için tamamen farklı olabilir.

Yanlış

<div class="btn" onclick="submit()">Gönder</div>

NVDA: "Gönder" (sadece metin — düğme olduğunu söylemez, Tab ile odaklanamaz, Enter ile çalışmaz)

Doğru

<button type="submit">Gönder</button>

NVDA: "Gönder düğme" (rol açıkça belli, Tab ile odaklanır, Enter/Space ile aktif olur)

Diğer semantik etiketler

ARIA landmarks

ARIA (Accessible Rich Internet Applications) öznitelikleri ile ekran okuyucuya sayfa yapısı hakkında ek bilgi verilir. NVDA'da "D" tuşu landmark'lar arasında zıplar.

<nav role="navigation" aria-label="Ana menü">...</nav>
<main role="main">...</main>
<aside role="complementary" aria-label="İlgili yazılar">...</aside>

Önemli: HTML5 semantik etiketler zaten varsayılan rol taşır (<nav> → role="navigation"). Tekrar yazmaya gerek yok. Ancak aria-label ile etiketi netleştirmek faydalıdır:

<nav aria-label="Ana navigasyon">...</nav>
<nav aria-label="Footer linkleri">...</nav>

Live regions

Dinamik içerikler (form hatası, sepete eklendi bildirimi, sohbet mesajı) için:

<div role="alert" aria-live="assertive">
  Form gönderilemedi: E-posta adresi geçersiz.
</div>

<div role="status" aria-live="polite">
  Sepete eklendi: 1 ürün.
</div>

• assertive: Mevcut okumayı keser, hemen okur (hatalar için)
• polite: Mevcut okuma bittikten sonra okur (bildirimler için)

Alt text en iyi pratikler

Görseller için alt öznitelği zorunludur. Üç temel kural:

1. Bilgilendirici görseller

<img src="grafik.png" alt="2026 Q1 satışları: Ocak 120K, Şubat 145K, Mart 180K — yıllık %35 büyüme">

Görsel bilgi taşıyorsa, o bilgiyi metinle aktarın.

2. Dekoratif görseller

<img src="susleme.png" alt="" role="presentation">

Sadece görsel süs için kullanılan ikon/desenler alt="" ile boş bırakılır. Ekran okuyucu bunları atlar.

3. İşlevsel görseller (link/buton içinde)

<a href="/profil">
  <img src="user.svg" alt="Profilim">
</a>

Alt text görselin değil, işlevin ne yaptığını söyler.

Yapay zeka ile otomatik alt text

Erişilebilir Çerez AI Tag Scanner özelliği (FAZ 14) OpenAI Vision API ile sitenizdeki alt'ı eksik görselleri tarar, otomatik öneri üretir. Yönetici onayıyla SDK runtime'da uygulanır.

Kontrast oranı — WCAG AA / AAA

WCAG 2.2 metin kontrast oranları:

Test araçları

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker/)
• Chrome DevTools → Lighthouse → Accessibility
• axe DevTools tarayıcı eklentisi

Yaygın hatalar

• Açık gri metin beyaz zemin (#999 / #fff = 2.85:1 — başarısız)
• Doğru: #595959 / #fff = 7.0:1 (AAA)
• Buton üzerinde beyaz metin + açık mavi zemin (#fff / #4dabf7 = 2.4:1 — başarısız)
• Doğru: #fff / #1864ab = 7.4:1 (AAA)

Klavye navigasyonu

Ekran okuyucu kullanan bir kullanıcı fareyle çalışmaz — tüm etkileşim klavye ile olmalıdır.

Temel kurallar

1. Tab sırası mantıklı olmalı (yukarıdan aşağı, soldan sağa)
2. Focus göstergesi görünür olmalı (:focus outline kaldırılmamalı veya alternatif eklemeli)
3. Skip-to-content linki ilk Tab basışında görünmeli
4. Modal açıldığında focus modal içinde tutulmalı (focus trap)
5. ESC ile modal/dropdown kapanmalı

CSS örneği

:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

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

.skip-link:focus {
  top: 0;
}

Skip link

<body>
  <a href="#main" class="skip-link">Ana içeriğe geç</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main">...</main>
</body>

Türkçe NVDA kurulumu ve kullanımı

NVDA Türkçe ses ile kurulum:

1. nvaccess.org adresinden NVDA indirip kurun (ücretsiz)
2. NVDA çalışırken Insert + N → Preferences → Speech
3. Synthesizer: "eSpeak NG" veya "Vocalizer" (ücretli, daha doğal)
4. Voice: "Turkish (tr)" seçin

Temel NVDA komutları

Bu komutları test etmek için kendi sitenizde 30 dakikalık bir "self-audit" yapabilirsiniz. Detaylar /blog/nvda-30-dakika-self-audit-rehberi yazısında.

Erişilebilir Çerez widget profilleri ile pratik destek

Tüm semantik HTML + ARIA çalışması bittikten sonra bile bazı kullanıcılar ek runtime ayarlara ihtiyaç duyar. Erişilebilir Çerez erişilebilirlik widget'ı 11 hızlı profil sunar:

• Görme Engelli Profili — yüksek kontrast + büyük font + outline vurgu
• Yaşlılık Profili — daha büyük metin + daha yüksek kontrast + büyük imleç
• Ekran Okuyucu Optimizasyonu — animasyon durdurma + odak vurgusu
• Disleksi Profili — OpenDyslexic font + satır aralığı + sarı/krem zemin
• Bilişsel Bozukluk Profili — basitleştirilmiş arayüz + odak modu

Tek tıkla aktif olur, kullanıcının tercihi cookie'de saklanır, sonraki ziyaretinde otomatik uygulanır. Erişilebilirlik widget'ı sayfasında detaylı liste.

Sıkça Sorulan Sorular

Türkiye'de NVDA dışında hangi ekran okuyucular kullanılır?

JAWS (ücretli, kurumsal), VoiceOver (Mac/iPhone — dahili), TalkBack (Android — dahili). NVDA en yaygın çünkü ücretsiz ve Türkçe ses desteği iyi.

Ekran okuyucu test etmeden site erişilebilir mi?

Hayır. Otomatik test araçları (axe, Lighthouse) hataların yalnızca %30-40'ını yakalar. Geri kalan %60-70 için en az 30 dk manuel ekran okuyucu testi şart.

Mobil uygulamada da aynı kurallar geçerli mi?

Evet — iOS'ta VoiceOver, Android'de TalkBack. React Native / Flutter projeleri için ayrı accessibilityLabel API'leri vardır.

Görme engelli kullanıcı CAPTCHA çözebilir mi?

Görsel CAPTCHA çözemez. Alternatif olarak: ses CAPTCHA, matematik sorusu, reCAPTCHA v3 (görünmez, davranış bazlı) kullanılmalı. En iyisi: reCAPTCHA v3 + hCaptcha alternatif.

Erişilebilirlik testi için ücretsiz hangi araçları kullanmalı?

axe DevTools (Chrome eklentisi), WAVE (wave.webaim.org), Lighthouse (Chrome DevTools), NVDA (Windows). Hepsi ücretsiz.

Sitenizin görme engelli kullanıcılara erişilebilir olup olmadığını test edin. Erişilebilir Çerez erişilebilirlik widget'ı 11 profil + 35 özellik ile tek embed çözüm sunar. Ücretsiz başlayın veya WCAG rehberini inceleyin.

Kaynaklar:

• TÜİK 2022 Engelli İstatistikleri — tuik.gov.tr
• NVDA — nvaccess.org
• WebAIM Contrast Checker — webaim.org/resources/contrastchecker
• WCAG 2.2 — w3.org/TR/WCAG22