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 не е закон, но много държави се позовават на него в законодателството си.

GOST R 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 критерия): текстови алтернативи, управление от клавиатура, достатъчно време, липса на мигане над 3 Hz. Ниво AA (+24 критерия): contrast ratio 4.5:1, субтитри за видео, промяна на размера на текста до 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 по имейл/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 (текстът на бутона съвпада с етикета за достъпност). За 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 за автоматичен одит.

SwiftUI код, съвместим с WCAG

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("Имейл")
                TextField("Въведете имейл", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Поле за въвеждане на имейл")
                    .accessibilityHint("Въведете имейл адрес")
            }
            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.