WCAG — що це таке, Web Content Accessibility Guidelines та рівні AA

Що таке WCAG?

WCAG (Web Content Accessibility Guidelines) — це набір рекомендацій щодо забезпечення доступності веб-контенту для людей з інвалідністю. Стандарт розробляється W3C Web Accessibility Initiative (WAI) з 1999 року. WCAG охоплює сліпих та слабозорих, глухих та слабочуючих, людей з обмеженнями рухливості, мовленнєвими та когнітивними порушеннями, а також літніх користувачів з віковими змінами.

Перша версія WCAG 1.0 вийшла в 1999 році та містила 14 керівних принципів. WCAG 2.0 (2008) стала технологічно нейтральною, застосовною до HTML, PDF, мультимедіа та мобільних додатків. WCAG 2.1 (2018) додала критерії для мобільних пристроїв та сенсорного введення. WCAG 2.2 (2023) — поточна версія з новими критеріями для анімації та фокусу. WCAG не є законом, але багато країн посилаються на нього в законодавстві.

ГОСТ Р 52872-2019 в Росії, European Accessibility Act в ЄС та Section 508 в США — всі вимагають відповідності WCAG AA. Для корпоративних та державних веб-сайтів WCAG AA — обов'язковий стандарт, недотримання якого веде до судових позовів. За даними UsableNet (2024), у США було подано понад 12 000 позовів про недоступність веб-сайтів.

Версії WCAG: порівняння

Юридичні наслідки невідповідності

Недотримання WCAG тягне серйозні ризики. У 2025 році European Accessibility Act (EAA) набув чинності, вимагаючи WCAG 2.1 AA для всіх публічних веб-сайтів та мобільних додатків в ЄС. Штрафи сягають 5% від річного обороту компанії. Середня сума врегулювання позовів у США — $25 000–$50 000. Аудит доступності має проводитися на кожному етапі розробки, а не лише перед релізом.

Чотири принципи WCAG: POUR

POUR — акронім чотирьох принципів WCAG: Perceivable (сприйнятність), Operable (керованість), Understandable (зрозумілість), Robust (стійкість). Кожен принцип містить керівні правила, а правила — тестовані критерії успіху. Всього WCAG 2.2 містить 13 правил і 86 критеріїв успіху. Кожен критерій має рівень A, AA або AAA.

Perceivable — Сприйнятність

Принцип Perceivable вимагає, щоб контент був представлений у формі, яку користувач може сприйняти. Правила: 1.1 Text Alternatives (текстові альтернативи), 1.2 Time-based Media (субтитри, розшифровки), 1.3 Adaptable (контент без втрати при зміні формату), 1.4 Distinguishable (контраст 4.5:1, колір, звук). Ключовий критерій 1.4.3 Contrast Minimum (AA) — найчастіше порушуваний: 86% сторінок не відповідають йому за даними WebAIM.

Operable — Керованість

Принцип Operable вимагає керованості інтерфейсу. Правила: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Критерій 2.1.1 Keyboard (A) — один з найкритичніших: всі функції мають бути доступні з клавіатури без миші. Модальні вікна, що закриваються лише по кліку, дропдауни без клавіатурної навігації — типові порушення.

Understandable — Зрозумілість

Принцип Understandable вимагає зрозумілості контенту та інтерфейсу. Правила: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Особливо важливий критерій 3.3.4 Error Prevention для фінансових та медичних додатків: запобігання серйозним наслідкам помилок введення. Критерій 3.2.6 Consistent Help (новий в WCAG 2.2) вимагає, щоб кнопки допомоги були на одних і тих же місцях.

Robust — Стійкість

Принцип Robust вимагає сумісності з допоміжними технологіями. Правило 4.1 Compatible з ключовим критерієм 4.1.2 Name, Role, Value (A): кожен UI-компонент повинен мати програмно визначувані ім'я, роль та стан. ARIA-атрибути (role, aria-label, aria-expanded) — основний інструмент. Без них скринридери не можуть визначити, чи є елемент кнопкою, посиланням або вкладкою.

Таблиця принципів WCAG

Рівні відповідності WCAG: A, AA, AAA

WCAG визначає три рівні: A (мінімальний), AA (стандартний) та AAA (максимальний). Рівень A — обов'язковий мінімум: без нього контент недоступний для деяких категорій користувачів. AA усуває основні бар'єри доступності. AAA — найвищий стандарт, але не може бути досягнутий для всього контенту (наприклад, деякі мови жестів або розшифровки аудіо не завжди реалізовані).

Рівень A (30 критеріїв): text alternatives, клавіатурна керованість, достатній час, відсутність миготіння вище 3 Гц. Рівень AA (+24 критерії): contrast ratio 4.5:1, субтитри для відео, resize тексту до 200%, чіткий фокус клавіатури. Рівень AAA (+32 критерії): contrast ratio 7:1, мова жестів, відключення анімації (2.3.3), розшифровка аудіо. Для державних сайтів достатньо AA.

Процес аудиту WCAG

Аудит доступності за WCAG включає: автоматичне тестування (axe DevTools, WAVE, Lighthouse — знаходить 30–40% помилок), ручне тестування клавіатури та скринридерів (VoiceOver, TalkBack, NVDA), експертний аудит для складних критеріїв та користувацьке тестування з людьми з інвалідністю. Звіт аудиту має містити рівень відповідності та перелік невідповідностей за кожним критерієм.

Що нового в WCAG 2.2

WCAG 2.2 додав 9 нових критеріїв. Ключові: 2.4.11 Focus Appearance (AA) — індикатор фокусу >= 2px з контрастом 3:1, 2.5.8 Target Size Minimum (AA) — сенсорна ціль мінімум 24x24 пікселі, 3.3.7 Accessible Authentication (AA) — автентифікація без CAPTCHA. Критерій 2.3.3 Animation from Interactions (AAA) — відключення анімації або не більше 5 секунд.

Focus Appearance — найважливіша зміна. Раніше outline: none без заміни був порушенням, але чітких вимог не було. WCAG 2.2 встановив: товщина >= 2px, контраст 3:1 з фоном, площа індикатора не менше площі елемента. Для кастомних кнопок з border-radius використовуйте box-shadow замість outline.

Focus Appearance в CSS

/* 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 забезпечує відповідність критерію Focus Appearance. Альтернатива через box-shadow підходить для елементів з border-radius. Темна тема та High Contrast адаптують кольори фокусу.

Accessible Authentication

Критерій 3.3.7 Accessible Authentication (AA) — одне з найбільш обговорюваних нововведень. CAPTCHA з розпізнаванням об'єктів, головоломки, перетягування повзунків — тепер порушення, якщо немає альтернативи. Допустимі способи: OTP по email/SMS, біометрія (Face ID, Touch ID), QR-коди, Magic link. Це спрощує життя не лише людям з когнітивними порушеннями, але й всім користувачам.

WCAG для мобільних додатків

WCAG застосовний до нативних iOS та Android додатків. Чотири принципи POUR покривають мобільні інтерфейси повністю. Специфічні критерії: 2.5.1 Pointer Gestures (жести без високої точності), 2.5.2 Pointer Cancellation (скасування випадкового дотику), 2.5.3 Label in Name (текст кнопки збігається з accessibility-лейблом). Для iOS використовується UIKit/UIAccessibility, для Android — AccessibilityService та ContentDescription.

Найчастіше в мобільних додатках порушуються: 1.1.1 Non-text Content — іконки без contentDescription, 2.4.3 Focus Order — неправильний порядок обходу, 2.5.8 Target Size — кнопки менше 24x24dp, 1.4.3 Contrast — текст на фонових зображеннях. iOS надає Accessibility Inspector в Xcode, Android — Accessibility Scanner для автоматичного аудиту.

WCAG-коректний код SwiftUI

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("Натисніть для дії")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Введіть email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Поле введення email")
                    .accessibilityHint("Введіть email адресу")
            }
            AccessibleButton(
                action: { },
                title: "Надіслати",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

SwiftUI-компоненти з accessibilityLabel, accessibilityHint та minWidth/minHeight >= 48pt забезпечують відповідність WCAG 2.5.8 (Target Size) та 2.5.3 (Label in Name). Використовуйте Xcode Accessibility Inspector для перевірки VoiceOver фокусу, порядку обходу та розмірів touch targets. Аналогічні вимоги застосовуються до Jetpack Compose через Modifier.semantics.