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. Аудит accessibility должен проводиться на каждом этапе разработки, а не только перед релизом.

Четыре принципа 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

Аудит accessibility по 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. Аналогичные требования apply к Jetpack Compose через Modifier.semantics.