Web Erişilebilirliği (WCAG 2.2): Uygulamalı a11y

Bu rehberde ne öğreneceksiniz?

Bu yazı bir haber özeti değil; adım adım uygulayabileceğiniz bir öğretici makale (tutorial) formatındadır. Her bölümün sonunda pratik çıkarımlar ve üretim ortamında karşılaşacağınız senaryolar yer alır.

• WCAG POUR prensiplerini uygulamak
• Klavye ile tam gezinme sağlamak
• ARIA'yı doğru ve minimum kullanmak
• Otomatik ve manuel test süreci kurmak

Ön koşullar

Rehberi verimli takip etmek için aşağıdaki bilgilere aşina olmanız önerilir. Eksik hissettiğiniz konularda ilgili bölümde ek kaynak ipuçları bulacaksınız.

• Semantik HTML temelleri
• React form ve button kullanımı
• Tarayıcı DevTools

Güncellik ve teknoloji yığını

Makale 2026 itibarıyla güncellenmiştir. Örnekler ve API referansları şu yığınla uyumludur: WCAG 2.2 AA, axe-core, React 19, keyboard navigation. Eski sürüm dokümantasyonu ile karıştırmamak için major versiyon farklarını özellikle belirttik.

Framework sürümleri hızla değişir; kalıcı olan prensipler (güvenlik, katman ayrımı, ölçüm) bu rehberin omurgasını oluşturur.

Bölüm 1: Semantik HTML

main, nav, article, button doğru kullanım. div onClick anti-pattern.

Adım adım uygulama

Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.

1. Sayfa başına tek h1 kontrol edin.
2. Form input'lara label htmlFor bağlayın.
3. İkon-only butona aria-label ekleyin.

Bölüm 2: Klavye ve focus

Tab sırası mantıklı olmalı. Modal açılınca focus trap; kapanınca trigger'a dönüş.

Dikkat: outline: none global CSS erişilebilirliği yok eder; :focus-visible kullanın.

Bölüm 3: Test süreci

CI'da axe; release öncesi VoiceOver/NVDA ile manuel test. Kontrast 4.5:1 (normal metin).

1. eslint-plugin-jsx-a11y kuralları
2. Playwright + axe entegrasyonu
3. Manuel keyboard walkthrough checklist

Derinlemesine: Senaryo çalışması

Gerçek bir ekip senaryosu: Cuma akşamı deploy sonrası hata oranı yükseldi. Aşağıdaki kontrol listesi ile kök nedeni daraltın.

Son deploy diff'ine bakın: şema migration, env değişikliği, feature flag açılışı.

Trace id ile tek bir başarısız isteği uçtan uca izleyin (edge → server → DB).

Gerekirse kill switch veya önceki imaja rollback; veri migration geri alınamazsa kod rollback yeterli olmayabilir.

Adım adım uygulama

Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.

1. Metrik panosunda hata oranı ve p95 latency
2. Log'da son 15 dakika exception grupları
3. Son başarılı deploy tag'ine dönüş kararı

Production checklist

Canlıya çıkmadan önce bu maddeleri review edin.

Production ortamında üretim ortamı ile ilgili en sık görülen sorun, geliştirme ortamındaki varsayımların (küçük veri seti, tek kullanıcı, sıcak cache) canlı trafikte çökmemesidir. Bu yüzden her değişiklikten önce yük testi veya en azından p95 latency ölçümü yapın.

Structured logging (request id, route, süre, kullanıcı id’si — PII olmadan) ve hata oranı alarmları, sorunları kullanıcı şikayetinden önce yakalamanızı sağlar. Log’da stack trace tutun; kullanıcıya generic mesaj gösterin.

Dokümantasyonu kod ile birlikte güncelleyin: README, ADR (Architecture Decision Record) veya ekip wiki’sinde “neden bu kararı aldık?” sorusunun cevabı gelecekteki sizin en büyük yardımcınızdır.

• Rate limit ve timeout tanımlı
• Secret'lar secret manager'da
• Health check ve readiness probe çalışıyor
• Alarm eşikleri tanımlı (5xx, latency)

Sık yapılan hatalar

Aşağıdaki tuzaklar eğitim ortamlarında nadiren, production'da ise pahalıya mal olur. Code review checklist'inize eklemenizi öneririz.

• role="button" div ile klavye desteği eksik
• Canlı bölge (aria-live) olmadan dinamik hata mesajı
• Düşük kontrast tema renkleri

Pratik alıştırmalar

Okumak yeterli değildir; öğrenmeyi pekiştirmek için küçük bir side-project veya mevcut kod tabanınızda şu görevleri uygulayın:

1. Auth modal'ı klavye-only ile baştan sona test edin
2. Bir sayfada axe violation sıfırlayın

Özet ve sonraki adımlar

Bu rehberdeki prensipleri tek seferde tüm projeye uygulamaya çalışmayın. Önce tek bir route veya modül seçin, ölçün, sonra yaygınlaştırın.

• WCAG 2.2 resmi spec özeti
• Inclusive design workshop