Bir web uygulamasının erişilebilirliğini nasıl test edersiniz?

Otomatik araçlar sorunların sadece bir kısmını (genelde %30-40 civarı) yakalar; bu yüzden otomatik testler + manuel klavye testi + ekran okuyucu testi birlikte kullanılır.

1. Otomatik

• Tarayıcı eklentileri: axe DevTools, Lighthouse erişilebilirlik denetimi, WAVE.
• Lint: eslint-plugin-jsx-a11y (alt metni olmayan görsel, tıklanabilir div vb.).
• Test kodunda: jest-axe / vitest-axe ile bileşen testleri, Playwright ile @axe-core/playwright.

import AxeBuilder from "@axe-core/playwright";

test("ana sayfa a11y ihlali içermez", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

• React Testing Library'de getByRole sorgularını tercih etmek, erişilebilir isimleri olmayan elemanları zaten test aşamasında ortaya çıkarır.

2. Manuel klavye testi

Fareyi bırakıp sayfayı sadece Tab, Shift+Tab, Enter, Space, Escape ve ok tuşlarıyla kullanın: Odak görünür mü? Sıra mantıklı mı? Modal'dan çıkılabiliyor mu? Klavye tuzağı var mı?

3. Ekran okuyucu

• macOS/iOS: VoiceOver, Windows: NVDA (ücretsiz) veya JAWS, Android: TalkBack.
• Başlık yapısı, landmark'lar (main, nav), buton/link isimleri, form hataları ve dinamik bildirimler doğru okunuyor mu?

4. Diğer kontroller

• Renk kontrastı: WCAG AA için normal metinde en az 4.5:1.
• %200 yakınlaştırma ve 320 px genişlikte içerik kaybı olmamalı (reflow).
• prefers-reduced-motion ve yüksek kontrast modu.

Hedef standart genelde WCAG 2.2 AA'dır; Avrupa'da European Accessibility Act (Haziran 2025'ten itibaren) birçok dijital hizmet için bunu yasal zorunluluk haline getirdi.