WCAG — bu nədir, Web Content Accessibility Guidelines və AA səviyyələri

WCAG nədir?

WCAG (Web Content Accessibility Guidelines) — əlilliyi olan insanlar üçün veb məzmunun əlçatanlığını təmin etmək üçün tövsiyələr toplusudur. Standart 1999-cu ildən W3C Web Accessibility Initiative (WAI) tərəfindən hazırlanır. WCAG kor və zəif görənlər, kar və eşitmə qabiliyyəti məhdud olanlar, hərəkət, nitq və idrak məhdudiyyətləri olan insanları, həmçinin yaşla bağlı dəyişiklikləri olan yaşlı istifadəçiləri əhatə edir.

Birinci versiya WCAG 1.0 1999-cu ildə buraxıldı və 14 rəhbər prinsipdən ibarət idi. WCAG 2.0 (2008) texnoloji cəhətdən neytral oldu, HTML, PDF, multimedia və mobil tətbiqlərə tətbiq oluna bilər. WCAG 2.1 (2018) mobil cihazlar və toxunma girişi üçün meyarlar əlavə etdi. WCAG 2.2 (2023) — animasiya və fokus üçün yeni meyarlarla cari versiyadır. WCAG qanun deyil, lakin bir çox ölkələr qanunvericilikdə ona istinad edir.

GOST R 52872-2019 Rusiyada, European Accessibility Act Aİ-də və Section 508 ABŞ-da — hamısı WCAG AA uyğunluğu tələb edir. Korporativ və dövlət saytları üçün WCAG AA məcburi standartdır, ona əməl edilməməsi məhkəmə iddialarına səbəb olur. UsableNet (2024) məlumatlarına görə, ABŞ-da veb-saytların əlçatmazlığı ilə bağlı 12 000-dən çox iddia qaldırılıb.

WCAG versiyaları: müqayisə

Uyğunsuzluğun hüquqi nəticələri

WCAG-a əməl edilməməsi ciddi risklər daşıyır. 2025-ci ildə European Accessibility Act (EAA) qüvvəyə minərək Aİ-də bütün ictimai veb-saytlar və mobil tətbiqlər üçün WCAG 2.1 AA tələb edir. Cərimələr şirkətin illik dövriyyəsinin 5%-nə çatır. ABŞ-da iddiaların orta həll məbləği $25 000–$50 000 təşkil edir. Accessibility auditi inkişafın hər mərhələsində aparılmalıdır, nəinki buraxılışdan əvvəl.

WCAG-ın dörd prinsipi: POUR

POUR — WCAG-ın dörd prinsipinin akronimi: Perceivable (qavranıla bilən), Operable (idarə oluna bilən), Understandable (anlaşılan), Robust (dayanıqlı). Hər prinsip rəhbər qaydaları, qaydalar isə sınaqdan keçirilə bilən uğur meyarlarını ehtiva edir. Ümumilikdə WCAG 2.2 13 qayda və 86 uğur meyarından ibarətdir. Hər meyar A, AA və ya AAA səviyyəsinə malikdir.

Perceivable — Qavranıla bilən

Perceivable prinsipi məzmunun istifadəçinin qavraya biləcəyi formada təqdim edilməsini tələb edir. Qaydalar: 1.1 Text Alternatives (mətn alternativləri), 1.2 Time-based Media (alt yazılar, transkripsiyalar), 1.3 Adaptable (format dəyişikliyində itkisiz məzmun), 1.4 Distinguishable (kontrast 4.5:1, rəng, səs). Əsas meyar 1.4.3 Contrast Minimum (AA) — ən çox pozulan: WebAIM məlumatlarına görə səhifələrin 86%-i ona uyğun gəlmir.

Operable — Idarə oluna bilən

Operable prinsipi interfeysin idarə oluna bilməsini tələb edir. Qaydalar: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Meyar 2.1.1 Keyboard (A) — ən kritiklərdən biri: bütün funksiyalar siçansız klaviaturadan əlçatan olmalıdır. Yalnız kliklə bağlanan modal pəncərələr, klaviatura naviqasiyası olmayan açılan menyular — tipik pozuntular.

Understandable — Anlaşılan

Understandable prinsipi məzmunun və interfeysin anlaşıqlı olmasını tələb edir. Qaydalar: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Xüsusilə maliyyə və tibbi tətbiqlər üçün 3.3.4 Error Prevention meyarı vacibdir: daxiletmə xətalarının ciddi nəticələrinin qarşısının alınması. Meyar 3.2.6 Consistent Help (WCAG 2.2-də yeni) kömək düymələrinin eyni yerlərdə olmasını tələb edir.

Robust — Dayanıqlı

Robust prinsipi köməkçi texnologiyalarla uyğunluğu tələb edir. Qayda 4.1 Compatible əsas meyar 4.1.2 Name, Role, Value (A) ilə: hər bir UI komponenti proqram təminatı ilə müəyyən edilə bilən ad, rol və vəziyyətə malik olmalıdır. ARIA atributları (role, aria-label, aria-expanded) — əsas vasitə. Onlar olmadan ekran oxuyucuları elementin düymə, keçid və ya tab olduğunu müəyyən edə bilməz.

WCAG prinsipləri cədvəli

WCAG uyğunluq səviyyələri: A, AA, AAA

WCAG üç səviyyə müəyyən edir: A (minimum), AA (standart) və AAA (maksimum). A səviyyəsi — məcburi minimum: onsuz məzmun bəzi istifadəçi kateqoriyaları üçün əlçatmazdır. AA əsas əlçatanlıq maneələrini aradan qaldırır. AAA — ən yüksək standartdır, lakin bütün məzmun üçün əldə edilə bilməz (məsələn, bəzi işarət dilləri və ya audio transkripsiyaları həmişə mümkün deyil).

A səviyyəsi (30 meyar): text alternatives, klaviatura idarəsi, kifayət qədər vaxt, 3 Hz-dən yuxarı titrəmənin olmaması. AA səviyyəsi (+24 meyar): contrast ratio 4.5:1, video üçün alt yazılar, mətnin 200%-ə qədər ölçüləndirilməsi, aydın klaviatura fokusu. AAA səviyyəsi (+32 meyar): contrast ratio 7:1, işarət dili, animasiyanın söndürülməsi (2.3.3), audio transkripsiyası. Dövlət saytları üçün AA kifayətdir.

WCAG auditi prosesi

WCAG-a uyğun accessibility auditi daxildir: avtomatik test (axe DevTools, WAVE, Lighthouse — səhvlərin 30–40%-ni tapır), klaviatura və ekran oxuyucularının (VoiceOver, TalkBack, NVDA) əl ilə test edilməsi, mürəkkəb meyarlar üçün ekspert auditi və əlilliyi olan insanlarla istifadəçi testi. Audit hesabatı uyğunluq səviyyəsini və hər meyar üzrə uyğunsuzluqların siyahısını ehtiva etməlidir.

WCAG 2.2-də yeniliklər

WCAG 2.2 9 yeni meyar əlavə etdi. Əsas olanlar: 2.4.11 Focus Appearance (AA) — fokus göstəricisi >= 2px kontrast 3:1 ilə, 2.5.8 Target Size Minimum (AA) — toxunma hədəfi minimum 24x24 piksel, 3.3.7 Accessible Authentication (AA) — CAPTCHA olmadan autentifikasiya. Meyar 2.3.3 Animation from Interactions (AAA) — söndürülə bilən animasiya və ya 5 saniyədən çox olmayan.

Focus Appearance — ən vacib dəyişiklik. Əvvəllər outline: none əvəzedicisiz pozuntu idi, lakin dəqiq tələblər yox idi. WCAG 2.2 müəyyən etdi: qalınlıq >= 2px, fonla kontrast 3:1, göstərici sahəsi elementin sahəsindən az olmamalıdır. Border-radius olan fərdi düymələr üçün outline əvəzinə box-shadow istifadə edin.

CSS-də 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 stilizasiyası Focus Appearance meyarına uyğunluğu təmin edir. Box-shadow vasitəsilə alternativ border-radius olan elementlər üçün uyğundur. Qaranlıq tema və High Contrast fokus rənglərini uyğunlaşdırır.

Accessible Authentication

3.3.7 Accessible Authentication (AA) meyarı — ən çox müzakirə olunan yeniliklərdən biridir. Obyekt tanıma ilə CAPTCHA, tapmacalar, sürgülərin sürüklənməsi — alternativ yoxdursa, indi pozuntudur. İcazə verilən üsullar: email/SMS ilə OTP, biometriya (Face ID, Touch ID), QR kodları, Magic link. Bu, təkcə idrak pozuntusu olan insanlar üçün deyil, bütün istifadəçilər üçün həyatı asanlaşdırır.

Mobil tətbiqlər üçün WCAG

WCAG yerli iOS və Android tətbiqlərinə tətbiq olunur. Dörd POUR prinsipi mobil interfeysləri tamamilə əhatə edir. Spesifik meyarlar: 2.5.1 Pointer Gestures (yüksək dəqiqlik tələb etməyən jestlər), 2.5.2 Pointer Cancellation (təsadüfi toxunmanın ləğvi), 2.5.3 Label in Name (düymə mətni accessibility etiketi ilə üst-üstə düşür). iOS üçün UIKit/UIAccessibility, Android üçün AccessibilityService və ContentDescription istifadə olunur.

Mobil tətbiqlərdə ən çox pozulanlar: 1.1.1 Non-text Content — contentDescription olmayan ikonlar, 2.4.3 Focus Order — səhv naviqasiya sırası, 2.5.8 Target Size — 24x24dp-dən kiçik düymələr, 1.4.3 Contrast — fon şəkillərində mətn. iOS Xcode-da Accessibility Inspector, Android isə avtomatik audit üçün Accessibility Scanner təqdim edir.

WCAG uyğun 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("Hərəkət etmək üçün klikləyin")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Email daxil edin", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Email daxiletmə sahəsi")
                    .accessibilityHint("Email ünvanı daxil edin")
            }
            AccessibleButton(
                action: { },
                title: "Göndər",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

accessibilityLabel, accessibilityHint və minWidth/minHeight >= 48pt olan SwiftUI komponentləri WCAG 2.5.8 (Target Size) və 2.5.3 (Label in Name) uyğunluğunu təmin edir. VoiceOver fokusunu, naviqasiya sırasını və touch target ölçülərini yoxlamaq üçün Xcode Accessibility Inspector-dan istifadə edin. Eyni tələblər Jetpack Compose-a Modifier.semantics vasitəsilə aiddir.