NVDA ile 30 Dakikada Web Sitenizin İlk Erişilebilirlik Testi

NVDA ile 30 Dakikada Web Sitenizin İlk Erişilebilirlik Testi

Kısa cevap: Otomatik erişilebilirlik tarayıcı eklentileri (axe DevTools, Lighthouse, WAVE) WCAG ihlallerinin yalnızca %30-40'ını otomatik tespit edebilir. Geri kalan %60-70'i için manuel ekran okuyucu testi şarttır. NVDA ücretsiz + açık kaynak + Türkçe ses destekli — başlamak için ideal. Bu yazıda kurulum, Türkçe ses ayarı, 10 maddelik checklist ve her madde için kullanılacak NVDA komutları adım adım anlatılıyor. Toplam süre: 30 dakika.

İçindekiler

• Neden manuel test gerekli?
• NVDA kurulumu (5 dk)
• Türkçe ses ayarı (3 dk)
• Temel NVDA komutları
• 10 maddelik test checklist'i
• Hata bulduğunuzda ne yapacaksınız?
• İleri seviye — kullanıcı testleri
• Sıkça Sorulan Sorular

Neden manuel test gerekli?

WebAIM Million 2023 raporuna göre dünya çapındaki 1 milyon home page'in %96.3'ünde otomatik tespit edilebilir WCAG hatası vardır. Otomatik araçların yakalayamadığı tipik ihlaller:

• Anlamsız link metni ("Buraya tıklayın", "Devamı") — araç link var diye OK derken NVDA bağlam dışı okur
• Alt text yanlış — alt="image1.jpg" araç için var ama anlamsız
• Heading hiyerarşi bozuk — h1 → h4 atlaması semantic anlam taşır
• ARIA yanlış kullanımı — role="button" var ama tabindex yok = erişilemez
• Klavye trap'i — modal açıldı ama Tab ile dışarı çıkamıyorsunuz
• Form etiketi yanlış bağlanmış — <label> var ama for ID'si yanlış

Bu hataları sadece ekran okuyucu deneyimi ortaya çıkarır. NVDA size 30 dakikada bunu yaşatır.

NVDA kurulumu (5 dk)

Sistem gereksinimi

• Windows 10 / 11 (NVDA Mac/Linux desteklemez)
• 4 GB RAM (8 GB+ önerilir)
• 200 MB disk

Adım 1: İndirme

1. nvaccess.org adresine git
2. "Download NVDA" butonuna bas
3. Bağış istenebilir; ücretsiz indirmek için "Donate later" tıklayabilirsiniz
4. En son sürümü (2024.x veya 2026.x) indir

Adım 2: Kurulum

1. İndirilen .exe dosyasını çalıştır
2. "Install NVDA on this computer" → İleri
3. Lisans sözleşmesi → Kabul et
4. Kısayolları + start menu seç → Kur
5. Kurulum 30-60 saniye sürer

Adım 3: İlk başlatma

NVDA otomatik başlar ve "Welcome to NVDA" mesajını sesle okur. Eğer ses çıkmıyorsa:

• Hoparlör seviyesi açık mı kontrol et
• NVDA Tray icon'una sağ tıkla → Preferences → Audio

Türkçe ses ayarı (3 dk)

Varsayılan NVDA sesi İngilizce eSpeak NG'dir. Türkçe için:

Adım 1: Preferences açma

• Insert + N (Insert tuşu = "NVDA tuşu") basın
• Veya tray icon'a sağ tıkla → Preferences → Settings

Adım 2: Speech ayarı

1. Sol menüden "Speech" seçin
2. Synthesizer: eSpeak NG (varsayılan, ücretsiz)
3. Voice: "Turkish (tr)" seçin
4. Rate: %30-40 (yavaş başlayın, alışınca artırın)
5. Pitch: %50
6. Volume: %75-100
7. OK ile kaydedin

Adım 3: Test

• Bir web sayfasına girin
• Insert + Down Arrow → tüm sayfa Türkçe okunmalı
• "Insert + Up Arrow" → durdurur

Daha doğal ses isteğiniz varsa

Vocalizer Expressive ücretli bir ses motorudur (~$50). "Aylin" Türkçe sesi çok doğaldır. Ancak başlangıç için eSpeak NG yeterlidir.

Temel NVDA komutları

Bu komutları öğrenmeden test yapamazsınız:

Not: "Insert" yerine CapsLock kullanabilirsiniz (laptop'larda Insert yoksa). Ayarlardan değiştirilebilir.

10 maddelik test checklist'i

Her madde 2-3 dakika sürer. Toplam: 30 dk.

✅ 1. Sayfa başlığı (Insert + T) — 1 dk

Her sayfa benzersiz, açıklayıcı bir başlığa sahip mi?

• ❌ "Anasayfa" — yetersiz
• ❌ "MarkanızDoğru | Anasayfa" — yetersiz
• ✅ "MarkanızDoğru — Türkiye'nin Lider Kahve Markası | Anasayfa" — iyi

NVDA komut: Insert + T. Her açtığınız sayfada okuyun.

✅ 2. Başlık hiyerarşisi (H tuşu) — 3 dk

H tuşuyla sayfada gezinin. Şu kuralları kontrol edin:

• Sayfada sadece 1 adet h1 var mı?
• h1 → h2 → h3 sırası doğru mu? (h2 atlanmıyor mu?)
• Başlıklar bilgi taşıyor mu yoksa stil için mi kullanılmış?

✅ 3. Form etiketleri (F tuşu) — 3 dk

F ile form öğelerine gezinin. Her öğe kendi etiketini sesli okumalı:

• ❌ "Düzenleme alanı boş" — etiket yok
• ✅ "E-posta adresi düzenleme alanı boş" — iyi

<label for="email">E-posta</label> ve <input id="email"> doğru bağlanmalı.

✅ 4. Link metinleri (K tuşu) — 3 dk

K ile sayfadaki tüm linkleri dolaşın. Her link bağlamından bağımsız anlamlı olmalı:

• ❌ "Tıklayın" — bağlamsız okunur
• ❌ "Devamı" — neyin devamı?
• ✅ "KVKK aydınlatma metnini oku" — bağımsız anlamlı

✅ 5. Alt text (Insert + F7 → Graphics) — 3 dk

Insert + F7 → "Graphics" filtresi. Tüm görseller listede:

• Bilgi taşıyan görsellerin anlamlı alt text'i var mı?
• Dekoratif görseller alt="" ile gizlenmiş mi?
• ❌ "image_2025_v3.jpg" — alt değil, dosya adı

✅ 6. Klavye navigasyonu (Tab) — 3 dk

Fareyi kapatın. Sadece Tab + Shift+Tab + Enter + Space + Ok tuşları kullanın:

• Tüm fonksiyonlara erişebiliyor musunuz?
• Tab sırası mantıklı mı (yukarıdan aşağı, soldan sağa)?
• Focus göstergesi görünür mü? (CSS outline kaldırılmış olabilir)

✅ 7. ARIA landmarks (D tuşu) — 2 dk

D ile sayfada landmarklar arasında gezinin:

• header / nav / main / aside / footer landmarklar var mı?
• Landmarklar etiketlenmiş mi? (aria-label="Ana menü")
• Ana içerik <main> etiketi ile sarmalanmış mı?

✅ 8. Modal / popup kapatma (ESC) — 2 dk

Modal/popup açıldığında:

• ESC tuşuyla kapanıyor mu?
• Focus modal içine trap ediliyor mu? (Tab dışarı çıkmıyor mu)
• Kapanınca focus açan butona geri dönüyor mu?

✅ 9. Hata mesajları (form gönderince) — 3 dk

Form gönderin (yanlış doldurarak hata tetikleyin):

• Hata mesajı NVDA tarafından otomatik okunuyor mu? (aria-live ile)
• Hata mesajı hangi alana ait olduğunu netleştiriyor mu?
• Focus hata alanına atlayabiliyor mu?

✅ 10. Sayfa dili (html lang) — 1 dk

Tarayıcı View Source → <html lang="?"> kontrol edin:

• Türkçe sayfa için lang="tr" olmalı
• Çoklu dil sitelerde her sayfa dili doğru tanımlanmalı
• Sayfa içi farklı dildeki bölümler için <span lang="en"> kullanın

NVDA otomatik olarak lang attribute'una göre ses motorunu değiştirir.

Hata bulduğunuzda ne yapacaksınız?

1. Hatayı belgeleyin

• Sayfa URL'i
• Hangi madde (1-10)
• NVDA'nın ne okuduğu vs ne okuması gerektiği
• Ekran görüntüsü + DOM inspect (DevTools F12)

2. Severity belirleyin

• Critical: Ana fonksiyon erişilemez (login, ödeme, arama)
• Serious: Önemli fonksiyon zor erişilebilir
• Moderate: Yan fonksiyon zor erişilebilir
• Minor: Estetik / UX iyileştirme

3. Çözüm önerin

• Kod örneği (önce/sonra)
• WCAG referans (örn. SC 1.3.1 Info and Relationships)

4. Geliştiriciye atayın

• Jira / Trello / GitHub Issues
• Severity'ye göre öncelik

5. Yeniden test edin

Düzeltme sonrası aynı NVDA testi ile doğrulayın. Otomatik testler yeterli değil.

İleri seviye — kullanıcı testleri

NVDA self-audit ilk adımdır. Gerçek kullanıcı testi kritik bir sonraki adımdır:

• Görme engelli kullanıcı testleri: UserTesting.com, Fable
• Sertifikalı erişilebilirlik denetimi: Deque, Level Access (uluslararası), TC Engelliler ve Yaşlı Hizmetleri Genel Müdürlüğü (TR)
• Otomatik scanner + manuel kombinasyonu: Erişilebilir Çerez WCAG Scanner (FAZ 15) — axe-core + Pa11y entegrasyonu

Sıkça Sorulan Sorular

NVDA Mac/Linux çalışıyor mu?

Hayır, sadece Windows. Mac için VoiceOver (dahili), Linux için Orca kullanın.

NVDA mı JAWS mı?

NVDA ücretsiz + açık kaynak. JAWS ücretli ($1000+) ama kurumsal kullanımda daha yaygın. Test için NVDA + JAWS ikisini birden yapmak önerilir. Çoğunlukla aynı sonuçları verirler.

Türkçe sesi yetersizse ne yaparım?

Microsoft'un OneCore Türkçe sesi sistem sesidir. NVDA'da "Synthesizer: Windows OneCore" seçin. Veya ücretli Vocalizer "Aylin" tercih edilebilir.

Mobil ekran okuyucu testleri için ne kullanmalı?

iPhone'da VoiceOver (Ayarlar > Erişilebilirlik > VoiceOver). Android'de TalkBack (Ayarlar > Erişilebilirlik > TalkBack). Aynı checklist mobilde de geçerli.

NVDA portable sürümü var mı?

Evet — kurulum yerine USB sürücüde çalıştırabilirsiniz. Kurumsal güvenlik politikası gerektiriyorsa portable sürüm + USB tercih edilebilir.

Tüm sayfaları test etmem gerek mi?

Hayır — başlangıç için en sık ziyaret edilen 5-10 sayfa: anasayfa, kategori, ürün/içerik, arama sonuç, login/register, checkout/iletişim formu, hesabım, hata sayfaları (404).

Sitenizin WCAG durumu hakkında somut bilgi alın. Bu 30 dakikalık test sonrası bulduğunuz hataları çözmek için Erişilebilir Çerez erişilebilirlik widget'ı kullanıcı tercihleriyle runtime fix sunar. Ücretsiz başlayın.

Kaynaklar:

• NVDA — nvaccess.org
• WebAIM Million 2023 Report — webaim.org/projects/million
• WCAG 2.2 — w3.org/TR/WCAG22