WCAG — nedir, Web Content Accessibility Guidelines ve AA seviyeleri

WCAG nedir?

WCAG (Web Content Accessibility Guidelines), engelli kişiler için web içeriğinin erişilebilirliğini sağlamaya yönelik bir dizi öneridir. Standart, 1999'dan beri W3C Web Accessibility Initiative (WAI) tarafından geliştirilmektedir. WCAG, kör ve görme engelli, sağır ve işitme engelli, hareket kısıtlılığı olan, konuşma ve bilişsel bozuklukları olan kişilerin yanı sıra yaşa bağlı değişiklikleri olan yaşlı kullanıcıları kapsar.

İlk sürüm WCAG 1.0, 1999'da yayınlandı ve 14 rehber prensip içeriyordu. WCAG 2.0 (2008) teknolojik olarak tarafsız hale geldi ve HTML, PDF, multimedya ve mobil uygulamalara uygulanabilir oldu. WCAG 2.1 (2018), mobil cihazlar ve dokunmatik giriş için kriterler ekledi. WCAG 2.2 (2023), animasyon ve odak için yeni kriterlerle mevcut sürümdür. WCAG bir yasa değildir, ancak birçok ülke mevzuatında buna atıfta bulunur.

GOST R 52872-2019 Rusya'da, European Accessibility Act AB'de ve Section 508 ABD'de — hepsi WCAG AA uyumluluğu gerektirir. Kurumsal ve devlet web siteleri için WCAG AA zorunlu bir standarttır; uyulmaması davalara yol açar. UsableNet (2024)'e göre, ABD'de 12.000'den fazla web erişilebilirlik davası açılmıştır.

WCAG sürümleri: karşılaştırma

Uyulmamasının yasal sonuçları

WCAG'ye uymamak ciddi riskler taşır. 2025'te European Accessibility Act (EAA) yürürlüğe girdi ve AB'deki tüm kamu web siteleri ve mobil uygulamalar için WCAG 2.1 AA gerektiriyor. Para cezaları şirketin yıllık cirosunun %5'ine kadar ulaşabilir. ABD'deki ortalama dava uzlaşma tutarı $25.000–$50.000'dir. Erişilebilirlik denetimleri, yalnızca yayın öncesinde değil, geliştirmenin her aşamasında yapılmalıdır.

WCAG'nin dört prensibi: POUR

POUR, dört WCAG prensibinin kısaltmasıdır: Perceivable (algılanabilir), Operable (çalıştırılabilir), Understandable (anlaşılabilir), Robust (sağlam). Her prensip kılavuzlar içerir ve kılavuzlar test edilebilir başarı kriterleri içerir. WCAG 2.2'de 13 kılavuz ve 86 başarı kriteri bulunur. Her kriter A, AA veya AAA seviyesine sahiptir.

Perceivable — Algılanabilir

Perceivable prensibi, içeriğin kullanıcının algılayabileceği bir biçimde sunulmasını gerektirir. Kılavuzlar: 1.1 Text Alternatives (metin alternatifleri), 1.2 Time-based Media (altyazılar, transkriptler), 1.3 Adaptable (biçim değiştiğinde kayıpsız içerik), 1.4 Distinguishable (kontrast 4.5:1, renk, ses). Anahtar kriter 1.4.3 Contrast Minimum (AA) en sık ihlal edilendir: WebAIM'e göre sayfaların %86'sı buna uymaz.

Operable — Çalıştırılabilir

Operable prensibi, arayüzün çalıştırılabilirliğini gerektirir. Kılavuzlar: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Kriter 2.1.1 Keyboard (A) en kritik olanlardan biridir: tüm işlevler fare olmadan klavye aracılığıyla erişilebilir olmalıdır. Yalnızca tıklamayla kapanan modal pencereler, klavye navigasyonu olmayan açılır menüler — tipik ihlaller.

Understandable — Anlaşılabilir

Understandable prensibi, içerik ve arayüzün anlaşılabilirliğini gerektirir. Kılavuzlar: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Kriter 3.3.4 Error Prevention, finansal ve tıbbi uygulamalar için özellikle önemlidir: giriş hatalarının ciddi sonuçlarını önlemek. Kriter 3.2.6 Consistent Help (WCAG 2.2'de yeni), yardım düğmelerinin aynı yerlerde olmasını gerektirir.

Robust — Sağlam

Robust prensibi, yardımcı teknolojilerle uyumluluk gerektirir. Kılavuz 4.1 Compatible, anahtar kriter 4.1.2 Name, Role, Value (A) ile: her UI bileşeni programlı olarak belirlenebilir ada, role ve duruma sahip olmalıdır. ARIA nitelikleri (role, aria-label, aria-expanded) ana araçtır. Bunlar olmadan, ekran okuyucular bir öğenin düğme, bağlantı veya sekme olup olmadığını belirleyemez.

WCAG prensipleri tablosu

WCAG uyumluluk seviyeleri: A, AA, AAA

WCAG üç seviye tanımlar: A (minimum), AA (standart) ve AAA (maksimum). Seviye A zorunlu minimumdur: bu olmadan içerik bazı kullanıcı kategorileri için erişilemez. AA, ana erişilebilirlik engellerini kaldırır. AAA en yüksek standarttır ancak tüm içerik için elde edilemez (örneğin, bazı işaret dilleri veya ses transkriptleri her zaman uygulanabilir değildir).

Seviye A (30 kriter): metin alternatifleri, klavye çalıştırılabilirliği, yeterli süre, 3 Hz üzerinde titreşim yok. Seviye AA (+24 kriter): kontrast oranı 4.5:1, video için altyazılar, metin boyutunu %200'e kadar yeniden boyutlandırma, net klavye odağı. Seviye AAA (+32 kriter): kontrast oranı 7:1, işaret dili, animasyonu devre dışı bırakma (2.3.3), ses transkripsiyonu. Devlet web siteleri için AA yeterlidir.

WCAG denetim süreci

WCAG erişilebilirlik denetimi şunları içerir: otomatik test (axe DevTools, WAVE, Lighthouse — %30–40 hata bulur), manuel klavye ve ekran okuyucu testi (VoiceOver, TalkBack, NVDA), karmaşık kriterler için uzman denetimi ve engelli kişilerle kullanıcı testi. Denetim raporu, uyumluluk seviyesini ve her kriter için uyumsuzluk listesini içermelidir.

WCAG 2.2'deki yenilikler

WCAG 2.2 9 yeni kriter ekledi. Başlıcaları: 2.4.11 Focus Appearance (AA) — 3:1 kontrastla >= 2px odak göstergesi, 2.5.8 Target Size Minimum (AA) — en az 24x24 piksel dokunma hedefi, 3.3.7 Accessible Authentication (AA) — CAPTCHA olmadan kimlik doğrulama. Kriter 2.3.3 Animation from Interactions (AAA) — devre dışı bırakılabilir animasyon veya 5 saniyeden fazla değil.

Focus Appearance en önemli değişikliktir. Daha önce, yedek olmadan outline: none bir ihlaldi ancak net gereksinimler yoktu. WCAG 2.2 şunları belirledi: kalınlık >= 2px, arka planla kontrast 3:1, gösterge alanı en az öğe alanı kadar. border-radius olan özel düğmeler için outline yerine box-shadow kullanın.

CSS'de Focus Appearance

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

:focus-visible stil verme, Focus Appearance kriterine uygunluğu sağlar. box-shadow aracılığıyla alternatif, border-radius olan öğeler için çalışır. Koyu tema ve High Contrast, odak renklerini uyarlar.

Accessible Authentication

3.3.7 Accessible Authentication (AA) kriteri en çok tartışılan yeniliklerden biridir. Nesne tanıma ile CAPTCHA, bulmacalar, kaydırıcı sürükleme — alternatif yoksa artık ihlaldir. Kabul edilebilir yöntemler: e-posta/SMS ile OTP, biyometri (Face ID, Touch ID), QR kodları, Magic link. Bu, yalnızca bilişsel bozukluğu olan kişiler için değil, tüm kullanıcılar için hayatı kolaylaştırır.

Mobil uygulamalar için WCAG

WCAG, yerel iOS ve Android uygulamaları için geçerlidir. Dört POUR prensibi mobil arayüzleri tamamen kapsar. Belirli kriterler: 2.5.1 Pointer Gestures (yüksek hassasiyet gerektirmeyen jestler), 2.5.2 Pointer Cancellation (yanlışlıkla dokunmayı iptal), 2.5.3 Label in Name (düğme metni erişilebilirlik etiketiyle eşleşir). iOS, UIKit/UIAccessibility kullanır, Android, AccessibilityService ve ContentDescription kullanır.

Mobil uygulamalarda en sık ihlal edilenler: 1.1.1 Non-text Content — contentDescription olmayan simgeler, 2.4.3 Focus Order — yanlış gezinme sırası, 2.5.8 Target Size — 24x24dp'den küçük düğmeler, 1.4.3 Contrast — arka plan görüntülerindeki metin. iOS, Xcode'da Accessibility Inspector sağlar, Android, otomatik denetim için Accessibility Scanner sağlar.

WCAG uyumlu SwiftUI kodu

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Eylem için tıklayın")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("E-posta")
                TextField("E-posta girin", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("E-posta giriş alanı")
                    .accessibilityHint("E-posta adresini girin")
            }
            AccessibleButton(
                action: { },
                title: "Gönder",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

accessibilityLabel, accessibilityHint ve minWidth/minHeight >= 48pt olan SwiftUI bileşenleri, WCAG 2.5.8 (Target Size) ve 2.5.3'e (Label in Name) uygunluğu sağlar. VoiceOver odağını, gezinme sırasını ve dokunma hedef boyutlarını kontrol etmek için Xcode Accessibility Inspector'ı kullanın. Benzer gereksinimler Modifier.semantics aracılığıyla Jetpack Compose için de geçerlidir.