WCAG 2.2 Açıklaması: Teknik Mühendislik Kılavuzu

WCAG 2.2 Değişikliklerine Genel Bakış

W3C, mobil cihaz kullanılabilirliği, az gören kullanıcılar için klavye etkileşimi ve bilişsel erişilebilirlikteki kritik boşlukları gidermek amacıyla WCAG 2.2 Tavsiyesini resmi olarak yayınladı. En önemlisi, modern tarayıcılar ve yardımcı teknolojiler HTML hata düzeltmesini HTML Living Standard'a göre standart olarak işlediğinden, 4.1.1 (Ayrıştırma) kriteri yürürlükten kaldırıldı.

• 9 yeni başarı kriteri getirildi (6'sı Seviye A/AA, 3'ü Seviye AAA).
• 1 eski kriter yürürlükten kaldırıldı (4.1.1 Ayrıştırma / Parsing).
• İşaretçi etkileşimlerine, bilişsel yüke ve görsel odak göstergelerinin netliğine verilen önem artırıldı.

Odak Görünümü ve Görünür Odak

SC 2.4.11 (Engellenmeyen Odak - Minimum, Seviye AA) uyarınca, yapışkan başlıklar veya çerez çubukları klavye odağı alan öğeleri tamamen gizlememelidir. SC 2.4.13 (Odak Görünümü, Seviye AAA) kapsamında odak göstergesi, odaklanılmamış duruma ve arka plana karşı en az 3:1 kontrast ve en az 2px dış çizgi kalınlığı sağlamalıdır.

/* Recommended CSS for WCAG 2.2 compliant focus styling */
:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
  scroll-margin-top: 5rem; /* Prevents sticky headers from obscuring focus */
  scroll-margin-bottom: 5rem;
}

Minimum Hedef Boyutu Mühendisliği

Başarı Kriteri 2.5.8 (Hedef Boyutu - Minimum, Seviye AA), tıklanabilir hedeflerin en az 24x24 CSS pikseli alana sahip olmasını zorunlu kılar; etrafında 24 piksellik boşluk sağlanan durumlar hariçtir.

• Metin cümleleri içindeki satır içi bağlantı hedefleri muaftır.
• Harita üzerindeki raptiyeler gibi temel gereksinim olan hedefler özel muafiyete sahiptir.
• Mobil dokunmatik hedefler için en iyi uygulama iOS için 44x44px ve Android için 48x48px olarak kalmaktadır.

Sürükleme Hareketleri ve Tek İşaretçi Alternatifleri

SC 2.5.7 (Sürükleme Hareketleri, Seviye AA) uyarınca, sürükleme yolu gerektiren herhangi bir işlev (kanban kartları, kaydırıcılar veya sıralanabilir listeler), yukarı/aşağı düğmeleri gibi tek bir tıklama veya dokunma alternatifi sunmalıdır.

// Example: Pairing drag-and-drop with accessible button controls
<div role="listitem">
  <span>Task Name</span>
  <div className="flex gap-2">
    <button aria-label="Move task up" onClick={moveUp}>↑</button>
    <button aria-label="Move task down" onClick={moveDown}>↓</button>
  </div>
</div>

Yinelenen Giriş ve Erişilebilir Kimlik Doğrulama

SC 3.3.7 (Yinelenen Giriş, Seviye A), kullanıcılardan aynı oturumda daha önce sağlanan bilgileri (teslimat adresiyle fatura adresinin eşleşmesi gibi) yeniden girmelerini istemeyi yasaklar. SC 3.3.8 (Erişilebilir Kimlik Doğrulama, Seviye AA), kimlik doğrulamanın yalnızca şifre ezberleme veya görsel CAPTCHA gibi bilişsel testlere dayanmamasını, şifre yöneticisi desteği ve passkey gibi alternatifler sunulmasını gerektirir.

Hızlı Uygulama Kontrol Listesi

Yeni özelliklerin yayına girmeden önce WCAG 2.2'ye uygun olduğunu doğrulamak için bu teknik listeyi kod incelemelerinde kullanın:

• Sabit başlıkların odaklanan öğeleri gizlemediğini doğrulayın (scroll-padding/scroll-margin kullanın).
• Düğmelerin ve simge butonlarının en az 24x24px tıklama alanına sahip olmasını sağlayın.
• Sürükle-bırak widget'ları için klavye veya yukarı/aşağı buton alternatifleri sunun.
• Tüm şifre ve MFA doğrulama alanlarında yapıştırmaya izin verin.
• Çok adımlı formlarda tekrarlanan adres ve profil bilgilerini otomatik doldurun.