Erişilebilirlik testi

Erişilebilirlik Testi Nedir

Erişilebilirlik testi, sayfanın klavye, ekran okuyucu ya da büyütme gibi farklı yollarla kullanılabildiğini kontrol etmektir. İki katmanı vardır: otomatik tarama (bir aracın kuralları DOM üzerinde çalıştırması) ve elle kontrol (sayfayı gerçekten klavyeyle ve ekran okuyucuyla kullanmak). İkisi birbirinin yerine geçmez, birbirini tamamlar.

Otomatik Araçlar Neyi Yakalar

Otomatik araçlar eksik alt, etiketsiz form alanı, düşük kontrast ya da geçersiz ARIA gibi kodda görülebilen sorunları hızlıca bulur. Ama "Bu alt metni görseli doğru anlatıyor mu?" ya da "Odak sırası mantıklı mı?" gibi bağlam isteyen soruları cevaplayamaz. Oranlar ölçüm yöntemine göre değişir:

WebAIM'in 2026 taramasında bir milyon ana sayfanın %95,9'unda otomatik olarak tespit edilen WCAG hatası vardı. Rapor aynı zamanda şunu hatırlatıyor: hata bulunmaması, sayfanın erişilebilir olduğu anlamına gelmez.⁴

axe-core

axe-core, Deque'in açık kaynak erişilebilirlik kural motorudur. WCAG 2.0, 2.1 ve 2.2'nin A, AA ve AAA kurallarını kapsar ve sıfır yanlış pozitif hedefler: bir şeyi hata diye raporluyorsa gerçekten hatadır.⁵ Playwright entegrasyonu, tarayıcı eklentileri ve birçok başka araç bu motoru kullanır.

Temel kullanım tek fonksiyondur: axe.run() bir Promise döner, sonuçtaki violations dizisi boşsa otomatik yakalanabilen bir hata bulunmamıştır.⁵

Vitest ile Component Taraması

Component testlerinde render edilen DOM'u axe ile taramak için ek bir matcher paketine gerek yoktur; axe-core'u doğrudan çağırabilirsiniz. Vitest ve React Testing Library kurulumu Vitest track'inde anlatılıyor.

$ pnpm add -D axe-core

import { render } from '@testing-library/react'
import axe from 'axe-core'
import { expect, test } from 'vitest'
import { SignupForm } from './SignupForm'

test('SignupForm otomatik bulunabilen a11y hatası içermez', async () => {
  const { container } = render(<SignupForm />)
  const results = await axe.run(container)
  expect(results.violations).toEqual([])
})

Bilmeniz gereken iki sınır var. axe-core'un JSDOM desteği sınırlıdır ve color-contrast kuralı JSDOM'da çalışmaz; kontrastı gerçek tarayıcıda (Playwright ile) test edin.⁵⁶ Component portal ile render ediliyorsa container yerine baseElement'i tarayın.⁶

Playwright ile Sayfa Taraması

Gerçek tarayıcıda tüm sayfayı taramak için @axe-core/playwright paketindeki AxeBuilder kullanılır.⁹ Playwright kurulumu Playwright track'inde anlatılıyor.

$ pnpm add -D @axe-core/playwright

import { test, expect } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'

test('ana sayfada otomatik bulunabilen a11y hatası yok', async ({ page }) => {
  await page.goto('/')
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze()
  expect(results.violations).toEqual([])
})

withTags taramayı belirli WCAG seviyeleriyle sınırlar; bazı axe kuralları WCAG'de karşılığı olmayan "best practice" kurallarıdır.⁹ Sayfanın bir bölümünü taramak için .include('#menu'), bilinen bir sorunu geçici olarak dışarıda bırakmak için .exclude() ya da .disableRules(['duplicate-id']) kullanılır. Açılır menü gibi etkileşimle görünen bir bölümü taramadan önce o bölümün görünmesini bekleyin.⁹

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y, JSX'i kod çalışmadan statik olarak inceler ve hataları editörde, yazarken gösterir. Yalnızca statik koda baktığı için çalışan DOM'u test eden bir araçla ve yardımcı teknolojiyle test edilerek tamamlanmalıdır.¹⁰

// eslint.config.js
import jsxA11y from 'eslint-plugin-jsx-a11y'

export default [
  jsxA11y.flatConfigs.recommended,
  // files ve globals ayarlarını ayrı bir nesnede ekleyin
]

Paylaşılan config files ya da globals ayarlamaz, bunları kendiniz eklersiniz.¹⁰ Next.js'in eslint-config-next paketi React, React Hooks ve Next.js kural setlerini getirir; zaten jsx-a11y gibi bir plugin kurduysanız çakışmayı önlemek için @next/eslint-plugin-next'i doğrudan kullanmanız önerilir.¹¹

Lighthouse Skorunun Sınırı

Lighthouse erişilebilirlik skoru, otomatik denetimlerin ağırlıklı ortalamasıdır. Ağırlıklar axe'in kullanıcı etkisi değerlendirmesine göre verilir, her denetim ya geçer ya kalır. Elle yapılması gereken denetimler skora hiç girmez.¹² Lighthouse'u çalıştırmayı Ölçüm dersinde gördünüz.

Manuel Matuzović, içeriği ekran okuyucudan gizleyen, odak çerçevesini kaldıran ve fareyi devre dışı bırakan, buna rağmen Lighthouse'tan 100 alan bir sayfa yaptı. Vardığı sonuç: otomatik test yalnızca ilk adımdır.¹³

Elle Kontrol: Klavyeyle Tur

Fareyi bir kenara bırakın ve sayfayı yalnızca klavyeyle kullanın:¹⁴

• Tab ile ileri, Shift+Tab ile geri gidin. Link, buton, form alanı ve medya kontrollerinin hepsine ulaşabiliyor musunuz?

• Girdiğiniz her elemandan Tab ile çıkabiliyor musunuz (klavye tuzağı yok mu)?

• Odak mantıklı okuma sırasıyla mı ilerliyor?

• Odaklanan eleman her zaman net görünüyor mu?

macOS'ta önce sistem ayarlarından klavyeyle tüm kontrollere gezinmeyi açmanız gerekebilir.¹⁴ Bu kontrollerin nasıl düzeltileceği Klavye ve odak yönetimi dersinde.

DevTools Accessibility Tree

Ekran okuyucunun okuduğu şey DOM değil, tarayıcının ürettiği erişilebilirlik ağacıdır (HTML dersinden hatırlayın). Chrome DevTools'ta görmek için:¹⁵

1. Elements panelinde bir eleman seçin.

2. Accessibility sekmesini açın (görünmüyorsa "More Tabs" altında).

3. "Show accessibility tree" seçeneğini açın; DOM ağacı tüm sayfanın erişilebilirlik ağacıyla yer değiştirir.

Bir düğümü seçince tarayıcının hesapladığı özellikler Computed Properties altında görünür. Aynı sekmedeki Source Order Viewer, elemanların kaynak sırasını numaralarla gösterir.¹⁵

Ekran Okuyucuya İlk Adım

Ekran okuyucu bir yetenek gibi pratikle gelişir. Başlamak için birkaç kısayol yeterlidir.

VoiceOver (macOS'ta yerleşik, en iyi Safari ile çalışır):¹⁶

NVDA (Windows için ücretsiz):¹⁷

NVDA tuşu olarak kurulumda Caps Lock'u seçebilirsiniz.¹⁷

Detaylı Öğrenmek İçin

• Konuşma: Manuel Matuzović, "Building the most inaccessible site possible with a perfect Lighthouse score" (Access All Areas 21).¹⁸

• Elle ilk inceleme: W3C'nin Easy Checks rehberi, araç gerektirmeyen kontroller.¹⁴

• Araç karşılaştırması: Adrian Roselli'nin elle inceleme ile dört ücretsiz aracı karşılaştırdığı yazı.³

• Ekran okuyucu rehberi: WebAIM'in VoiceOver makalesi, iOS dahil daha fazla kısayol.¹⁶