HTML Academy · Ders

Ekran Okuyucularla Test Etme

ARIA uygulamalarını doğrulamak için VoiceOver ve NVDA kullanın

Ekran Okuyucularla Test Etme, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Ekran Okuyucularla Neden Sınama Yapmalısınız

Otomatik araçlar erişilebilirlik sorunlarının yalnızca %30-40'ını yakalar. Gerçek ekran okuyucu sınaması, otomatik kontrollerin gözden kaçırdığı sorunları ortaya çıkarır:

Karışık okuma sırası
Yararsız ARIA duyuruları
Eksik focus yönetimi
Karışık etkileşim kalıpları

Mac'te VoiceOver

VoiceOver macOS ile birlikte gelir; yükleme gerekmez:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

iOS'ta VoiceOver

iPhone/iPad üzerinde VoiceOver ile mobil ekran okuyucu deneyimini sınayınız:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

Windows'ta NVDA

NVDA, Windows için ücretsiz ve açık kaynaklı bir ekran okuyucudur:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Ekran Okuyucu Sınama Kontrol Listesi

Ekran okuyucuyla doğrulanması gerekenler:

Sayfa başlığı yükleme sırasında duyuruluyor mu
Başlıklar mantıklı bir gezinme yapısı oluşturuyor mu
Tüm görsellerin anlamlı veya boş alt metni var mı
Tüm form alanlarının etiketleri var mı
Düğmelerin ve bağlantıların açıklayıcı adları var mı
Modal focus tuzağı doğru çalışıyor mu
Dinamik içerik güncellemeleri duyuruluyor mu

Yaygın Ekran Okuyucu Hataları

Otomatik sınamaların gözden kaçırdığı sorunlar:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Önce Klavye Sınaması

Ekran okuyucu kullanmadan önce yalnızca klavyeyle sınama yapınız:

Farenizi veya izleme dörtgeninizi çıkarınız
Yalnızca Tab tuşunu kullanarak sayfanın tamamında gezininiz
Etkileşimli her öğeye ulaşılabildiğini doğrulayınız
Tüm işlemlerin klavyeyle gerçekleştirilebildiğini doğrulayınız

Otomatik Erişilebilirlik Sınama Araçları

Elle yapılan sınamayı otomatik araçlarla tamamlayınız:

axe DevTools — Chrome uzantısı; en doğru otomatik denetleyici
WAVE — wavebooth.com; sayfa üzerinde görsel katman
Lighthouse — Chrome DevTools; Performans + Erişilebilirlik denetimi
pa11y — CLI aracı; CI/CD işlem hatları için idealdir

ARIA Kalıpları Başvurusu

W3C ARIA Yazar Uygulamaları Kılavuzu (APG), başvuru uygulamaları sağlar:

Akordeon, Uyarı, Uyarı İletişim Kutusu
Ekmek kırıntısı, Düğme, Atlıkarınca
Onay kutusu, Birleşik kutu, İletişim kutusu
Açılım, Feed, Izgara
Liste kutusu, Menü, Menü çubuğu
Sekme, Araç ipucu, Ağaç görünümü

URL: w3.org/WAI/ARIA/apg/

Sürekli Erişilebilirlik Entegrasyonu

Erişilebilirlik sınamasını iş akışınıza dahil ediniz:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Sınama Özeti

Tam bir erişilebilirlik sınama stratejisi:

Tasarım — renk karşıtlığını ve dokunma target boyutlarını kontrol ediniz
Geliştirme — klavye sınaması ve otomatik axe taraması
İnceleme — ekran okuyucu sınaması (VoiceOver + NVDA)
CI/CD — otomatik işlem hattında pa11y veya axe
Üretim — Lighthouse ve elle yapılan noktasal kontroller

Kısa Kontrol

Otomatik araçlar erişilebilirlik sorunlarının yüzde kaçını güvenilir biçimde yakalayabilir?

Özet: Ekran Okuyucu Sınaması

Sınama için temel bilgiler:

VoiceOver (Mac/iOS) ve NVDA (Windows) ücretsiz ve vazgeçilmezdir
Önce yalnızca klavyeyle sınayınız; ardından ekran okuyucu ekleyiniz
Otomatik araçlar: axe, WAVE, Lighthouse, pa11y
Otomatik sınamalar sorunların yalnızca yaklaşık %30-40'ını yakalar
Doğru ARIA uygulamaları için APG kalıplarına başvurunuz

Sıkça Sorulan Sorular

“Ekran Okuyucularla Test Etme” dersi ücretsiz mi?

Evet — “Ekran Okuyucularla Test Etme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Ekran Okuyucularla Test Etme” dersinde ne öğreneceğim?

ARIA uygulamalarını doğrulamak için VoiceOver ve NVDA kullanın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Ekran Okuyucularla Test Etme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Geçişler için aria-expanded ve aria-controls
aria-selected ve Sekme Kalıpları
Canlı Bölgeler: aria-live aria-atomic aria-relevant
Ekran Okuyucularla Test Etme

← HTML Academy Sayfasına Dön