WCAG — bu nima, Web Content Accessibility Guidelines va AA darajalari

WCAG nima?

WCAG (Web Content Accessibility Guidelines) — nogironligi bor odamlar uchun veb-kontentning mavjudligini ta'minlash bo'yicha tavsiyalar to'plami. Standart 1999 yildan beri W3C Web Accessibility Initiative (WAI) tomonidan ishlab chiqiladi. WCAG ko'r va zaif ko'ruvchilar, kar va eshitish qobiliyati cheklanganlar, harakat, nutq va kognitiv cheklovlari bor odamlarni, shuningdek yoshga bog'liq o'zgarishlari bo'lgan keksa foydalanuvchilarni qamrab oladi.

Birinchi versiya WCAG 1.0 1999 yilda chiqarilgan va 14 ta rahbarlik printsipini o'z ichiga olgan. WCAG 2.0 (2008) texnologik jihatdan neytral bo'lib, HTML, PDF, multimedia va mobil ilovalarga qo'llaniladi. WCAG 2.1 (2018) mobil qurilmalar va sensorli kiritish uchun mezonlar qo'shdi. WCAG 2.2 (2023) — animatsiya va fokus uchun yangi mezonlar bilan joriy versiya. WCAG qonun emas, lekin ko'plab davlatlar qonunchilikda unga havola qiladi.

GOST R 52872-2019 Rossiyada, European Accessibility Act Yevropa Ittifoqida va Section 508 AQShda — barchasi WCAG AA muvofiqligini talab qiladi. Korporativ va davlat saytlari uchun WCAG AA majburiy standart bo'lib, unga rioya qilmaslik sud da'volariga olib keladi. UsableNet (2024) ma'lumotlariga ko'ra, AQShda veb-saytlarning mavjud emasligi haqida 12 000 dan ortiq da'vo qilingan.

WCAG versiyalari: taqqoslash

Muvofiq bo'lmaslikning huquqiy oqibatlari

WCAG ga rioya qilmaslik jiddiy xavflarni keltirib chiqaradi. 2025 yilda European Accessibility Act (EAA) kuchga kirib, Yevropa Ittifoqidagi barcha jamoat veb-saytlari va mobil ilovalari uchun WCAG 2.1 AA ni talab qiladi. Jarimalar kompaniyaning yillik aylanmasining 5 foizigacha yetadi. AQShda da'volarning o'rtacha hal qilish miqdori $25 000–$50 000 ni tashkil qiladi. Mavjudlik auditi ishlab chiqishning har bir bosqichida o'tkazilishi kerak, nashrdan oldin emas.

WCAGning to'rtta printsipi: POUR

POUR — WCAGning to'rtta printsipining akronimi: Perceivable (idrok qilinadigan), Operable (boshqariladigan), Understandable (tushunarli), Robust (barqaror). Har bir printsip yo'riqnomalarni, yo'riqnomalar esa sinab ko'riladigan muvaffaqiyat mezonlarini o'z ichiga oladi. Jami WCAG 2.2 13 ta yo'riqnoma va 86 ta muvaffaqiyat mezonini o'z ichiga oladi. Har bir mezon A, AA yoki AAA darajasiga ega.

Perceivable — Idrok qilinadigan

Perceivable printsipi kontentning foydalanuvchi idrok qila oladigan shaklda taqdim etilishini talab qiladi. Yo'riqnomalar: 1.1 Text Alternatives (matnli alternativlar), 1.2 Time-based Media (subtitrlar, transkripsiyalar), 1.3 Adaptable (format o'zgarishida yo'qotishsiz kontent), 1.4 Distinguishable (kontrast 4.5:1, rang, tovush). Asosiy mezon 1.4.3 Contrast Minimum (AA) — eng ko'p buziladigan: WebAIM ma'lumotlariga ko'ra sahifalarning 86 foizi unga mos kelmaydi.

Operable — Boshqariladigan

Operable printsipi interfeysning boshqarilishini talab qiladi. Yo'riqnomalar: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Mezon 2.1.1 Keyboard (A) — eng muhimlaridan biri: barcha funksiyalar sichqonsiz klaviaturadan mavjud bo'lishi kerak. Faqat bosish bilan yopiladigan modal oynalar, klaviatura navigatsiyasi bo'lmagan ochiladigan menyular — odatiy buzilishlar.

Understandable — Tushunarli

Understandable printsipi kontent va interfeysning tushunarli bo'lishini talab qiladi. Yo'riqnomalar: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Ayniqsa moliyaviy va tibbiy ilovalar uchun 3.3.4 Error Prevention mezoni muhim: kiritish xatolarining jiddiy oqibatlarining oldini olish. Mezon 3.2.6 Consistent Help (WCAG 2.2 da yangi) yordam tugmalarining bir xil joylarda bo'lishini talab qiladi.

Robust — Barqaror

Robust printsipi yordamchi texnologiyalar bilan moslikni talab qiladi. Yo'riqnoma 4.1 Compatible asosiy mezon 4.1.2 Name, Role, Value (A) bilan: har bir UI komponenti dasturiy jihatdan aniqlanishi mumkin bo'lgan nom, rol va holatga ega bo'lishi kerak. ARIA atributlari (role, aria-label, aria-expanded) — asosiy vosita. Ularsiz ekran o'quvchilari elementning tugma, havola yoki tab ekanligini aniqlay olmaydi.

WCAG printsiplari jadvali

WCAG muvofiqlik darajalari: A, AA, AAA

WCAG uchta darajani belgilaydi: A (minimal), AA (standart) va AAA (maksimal). A darajasi — majburiy minimum: usiz kontent ba'zi foydalanuvchi toifalari uchun mavjud emas. AA asosiy mavjudlik to'siqlarini bartaraf qiladi. AAA — eng yuqori standart, lekin barcha kontent uchun erishib bo'lmaydi (masalan, ba'zi imo-ishora tillari yoki audio transkripsiyalar har doim ham mumkin emas).

A darajasi (30 mezon): text alternatives, klaviatura boshqaruvi, yetarli vaqt, 3 Hz dan yuqori miltillashning yo'qligi. AA darajasi (+24 mezon): contrast ratio 4.5:1, video uchun subtitrlar, matnni 200% gacha o'lchamlash, aniq klaviatura fokusi. AAA darajasi (+32 mezon): contrast ratio 7:1, imo-ishora tili, animatsiyani o'chirish (2.3.3), audio transkripsiya. Davlat saytlari uchun AA yetarli.

WCAG auditi jarayoni

WCAG bo'yicha mavjudlik auditi o'z ichiga oladi: avtomatik test (axe DevTools, WAVE, Lighthouse — xatolarning 30–40 foizini topadi), klaviatura va ekran o'quvchilarining (VoiceOver, TalkBack, NVDA) qo'lda testi, murakkab mezonlar uchun ekspert auditi va nogironligi bor odamlar bilan foydalanuvchi testi. Audit hisoboti muvofiqlik darajasini va har bir mezon bo'yicha nomuvofiqliklar ro'yxatini o'z ichiga olishi kerak.

WCAG 2.2 da yangiliklar

WCAG 2.2 9 ta yangi mezon qo'shdi. Asosiy: 2.4.11 Focus Appearance (AA) — fokus ko'rsatkichi >= 2px kontrast 3:1 bilan, 2.5.8 Target Size Minimum (AA) — sensorli nishon minimal 24x24 piksel, 3.3.7 Accessible Authentication (AA) — CAPTCHAsiz autentifikatsiya. Mezon 2.3.3 Animation from Interactions (AAA) — o'chiriladigan animatsiya yoki 5 soniyadan ko'p bo'lmagan.

Focus Appearance — eng muhim o'zgarish. Ilgari outline: none almashtiruvchisiz buzilish edi, ammo aniq talablar yo'q edi. WCAG 2.2 belgiladi: qalinlik >= 2px, fon bilan kontrast 3:1, ko'rsatkich maydoni element maydonidan kam bo'lmasligi kerak. Border-radius bo'lgan maxsus tugmalar uchun outline o'rniga box-shadow dan foydalaning.

CSS da 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 stilizatsiyasi Focus Appearance mezoniga muvofiqlikni ta'minlaydi. Box-shadow orqali alternativ border-radius bo'lgan elementlar uchun mos keladi. Qorong'i tema va High Contrast fokus ranglarini moslashtiradi.

Accessible Authentication

3.3.7 Accessible Authentication (AA) mezoni — eng ko'p muhokama qilingan yangiliklardan biri. Ob'ektlarni tanib olish bilan CAPTCHA, jumboqlar, slayderlarni sudrash — agar alternativ bo'lmasa, endi buzilish hisoblanadi. Ruxsat etilgan usullar: email/SMS orqali OTP, biometriya (Face ID, Touch ID), QR kodlar, Magic link. Bu nafaqat kognitiv buzilishlari bo'lgan odamlar, balki barcha foydalanuvchilar uchun hayotni osonlashtiradi.

Mobil ilovalar uchun WCAG

WCAG mahalliy iOS va Android ilovalariga qo'llaniladi. To'rtta POUR printsipi mobil interfeyslarni to'liq qamrab oladi. Maxsus mezonlar: 2.5.1 Pointer Gestures (yuqori aniqlik talab qilmaydigan imo-ishoralar), 2.5.2 Pointer Cancellation (tasodifiy teginishni bekor qilish), 2.5.3 Label in Name (tugma matni yorlig'iga mos keladi). iOS uchun UIKit/UIAccessibility, Android uchun AccessibilityService va ContentDescription ishlatiladi.

Mobil ilovalarda eng ko'p buziladiganlar: 1.1.1 Non-text Content — contentDescriptionsiz ikonkalar, 2.4.3 Focus Order — noto'g'ri navigatsiya tartibi, 2.5.8 Target Size — 24x24dp dan kichik tugmalar, 1.4.3 Contrast — fon rasmlaridagi matn. iOS Xcode da Accessibility Inspector, Android esa avtomatik audit uchun Accessibility Scanner taqdim etadi.

WCAG ga mos SwiftUICode

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("Harakat úchun bosing")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Emailni kiriting", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Email kiritish maydoni")
                    .accessibilityHint("Email manzilini kiriting")
            }
            AccessibleButton(
                action: { },
                title: "Yuborish",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

accessibilityLabel, accessibilityHint va minWidth/minHeight >= 48pt bo'lgan SwiftUI komponentlari WCAG 2.5.8 (Target Size) va 2.5.3 (Label in Name) ga muvofiqligini ta'minlaydi. VoiceOver fokusini, navigatsiya tartibini va touch target o'lchamlarini tekshirish uchun Xcode Accessibility Inspector dan foydalaning. Xuddi shu talablar Jetpack Compose ga Modifier.semantics orqali qo'llaniladi.