WCAG и уровни A/AA/AAA

Главный стандарт доступности изнутри: четыре принципа, десятки критериев, три уровня — и почему в реальных проектах ориентир один.

WCAG (Web Content Accessibility Guidelines, «Руководство по доступности веб-контента») — стандарт W3C, который превращает расплывчатое «сайт должен быть удобен всем» в список конкретных проверяемых требований.

Ценность WCAG не в морали, а в проверяемости. «Сделайте контраст получше» — это спор дизайнера с разработчиком. «Контраст текста к фону не ниже 4.5:1» — это число, которое либо проходит, либо нет, и о котором нельзя спорить на ретро. Именно поэтому WCAG лёг в основу законодательства десятков стран и в требования тендеров: юристу нужен критерий, а не вкус.

Как устроен стандарт

WCAG живёт в W3C. Версии, которые встречаются на практике:

WCAG 2.0 (2008) — база, на которую до сих пор ссылаются старые законы вроде американского Section 508.
WCAG 2.1 (2018) — добавил мобильные и когнитивные требования: ориентация экрана, reflow, размер цели касания.
WCAG 2.2 (2023) — актуальная. Добавила девять критериев (видимость фокуса при перекрытии, доступная аутентификация, помощь при повторном вводе) и убрала устаревший 4.1.1 Parsing.

Иерархия внутри — три уровня вложенности:

4 принципа (POUR)
 └── 13 руководств (guidelines) — общие цели, не проверяются напрямую
      └── критерии успеха (success criteria) — то, что реально проверяют
           у каждого стоит метка уровня: A, AA или AAA
           в WCAG 2.2 их 86

На практике вы работаете именно с критериями успеха. Их номера (1.4.3, 2.1.1, 4.1.2) — общий язык между разработчиком, тестировщиком и аудитором: первая цифра — принцип, вторая — руководство, третья — сам критерий.

POUR: четыре принципа

Аббревиатура POUR — единственное, что стоит выучить наизусть. Если непонятно, куда отнести проблему, спросите: пользователь её не воспринял, не смог управлять, не понял или это его технология не поняла ваш код?

P — Perceivable (воспринимаемость)

Информация должна доходить хотя бы по одному доступному каналу. Ключевые критерии: 1.1.1 текстовые альтернативы для картинок, 1.2.2 субтитры к видео, 1.3.1 структура передана разметкой, а не только вёрсткой, 1.4.1 смысл не передаётся одним цветом, 1.4.3 контраст текста, 1.4.10 reflow — страница работает на ширине 320 CSS-пикселей без горизонтальной прокрутки.

O — Operable (управляемость)

До всего можно добраться и всё можно нажать. 2.1.1 — вся функциональность доступна с клавиатуры; 2.1.2 — из компонента можно уйти клавиатурой («ловушка фокуса» запрещена); 2.4.7 — фокус видно; 2.2.1 — время на задачу можно продлить; 2.3.1 — нет мигания чаще трёх раз в секунду (это про эпилепсию, требование жёсткое); 2.5.8 — цель нажатия не меньше 24×24 CSS-пикселей.

U — Understandable (понятность)

Интерфейс предсказуем, а ошибки объяснимы. 3.1.1 — у страницы указан язык (<html lang="ru">: без этого атрибута скринридер прочитает русский текст с английской фонетикой, и это буквально одна строка правки); 3.2.2 — изменение значения поля не приводит к неожиданной перезагрузке; 3.3.1 — ошибка описана текстом; 3.3.3 — подсказано, как её исправить.

R — Robust (надёжность)

Код понятен не только браузеру, но и вспомогательным технологиям. Здесь всего два критерия, но они важнейшие: 4.1.2 Name, Role, Value — у каждого интерактивного элемента есть имя, роль и состояние (то самое дерево доступности из прошлого урока), и 4.1.3 Status Messages — сообщения вроде «Товар добавлен в корзину» объявляются, даже если фокус не переносится на них.

Уровни A, AA и AAA

Уровень — это не «качество исполнения», а степень строгости требования. Один и тот же аспект встречается на разных уровнях со всё более жёсткой планкой.

Уровень	Смысл	Пример критерия
A	Минимум. Без него часть людей просто не может пользоваться сайтом.	`2.1.1` — всё работает с клавиатуры; `1.1.1` — у картинок есть `alt`
AA	Практический стандарт индустрии. Устраняет серьёзные барьеры, при этом реалистичен для любого проекта.	`1.4.3` — контраст текста 4.5:1; `2.4.7` — фокус видим; `1.4.10` — reflow до 320px
AAA	Максимум. Часто невыполним для целого сайта в принципе.	`1.4.6` — контраст 7:1; `1.2.6` — перевод видео на жестовый язык; `3.1.5` — текст понятен на уровне младшей школы

Обратите внимание на контраст — он проходит через все три уровня и лучше всего показывает логику:

/* Серый #999999 на белом даёт контраст 2.85:1 — мимо даже AA */
.hint { color: #999999; background: #ffffff; }

/* #767676 на белом — ровно 4.54:1, минимальный серый, проходящий AA (4.5:1) */
.hint { color: #767676; background: #ffffff; }

Полная таблица порогов:

Что	AA	AAA
Обычный текст	4.5:1	7:1
Крупный текст (от 24px или 18.66px полужирный)	3:1	4.5:1
Иконки, границы полей, элементы UI	3:1 (критерий `1.4.11`)	—

Почему целятся в AA

Первая причина — практическая. AAA не задумывался как цель для целого сайта: сам W3C прямо пишет, что не рекомендует требовать соответствия AAA для всего контента, потому что для части материалов это попросту невозможно. Попробуйте выполнить «текст понятен читателю с образованием на уровне младшей школы» на сайте про налоговое право или про, скажем, дерево доступности.

Вторая — регуляторная. Когда законодатель ссылается на WCAG, он почти всегда ссылается на уровень AA: европейский стандарт EN 301 549 (на него опирается European Accessibility Act, вступивший в силу для бизнеса в июне 2025), американские Section 508 и правила ADA, российский ГОСТ Р 52872-2019, гармонизированный с WCAG. Тендер, аудит или претензия почти наверняка будут говорить «WCAG 2.1 AA» или «WCAG 2.2 AA».

Практический вывод: берите AA как обязательную планку и подтягивайте отдельные критерии AAA там, где это дёшево. Например, контраст 7:1 для основного текста — это часто просто вопрос выбора более тёмного серого в дизайн-токенах, и он бесплатно улучшает читаемость для всех.

Как это работает

Критерий успеха всегда сформулирован как утверждение, которое можно проверить и получить «да» или «нет». Возьмём 1.4.3 Contrast (Minimum), уровень AA. Проверка выглядит так:

Взять цвет текста и фактический цвет фона под ним (не тот, что задуман в макете, — а тот, что получился с учётом прозрачности и градиента).
Вычислить относительную яркость обоих цветов и их соотношение.
Сравнить с порогом: 4.5:1 для обычного текста, 3:1 — для крупного.

Из этой механики следуют два неочевидных вывода. Первый: у критерия есть исключения, и их надо читать — например, логотипы и неактивные (disabled) элементы под 1.4.3 не подпадают. Второй: соответствие проверяется на странице целиком. Страница либо соответствует AA, либо нет; «мы на 87 % соответствуем AA» — это не термин WCAG, а маркетинг.

Частые ошибки

Считать, что уровень = «насколько хорошо». Уровень — это строгость требования. Сайт уровня AA не «сделан на четвёрку», он выполняет и все критерии A, и все критерии AA.
Гнаться за AAA целиком. Это почти всегда невыполнимо и отвлекает от невыполненных базовых критериев уровня A.
Думать, что WCAG — это про незрячих. Больше половины критериев вообще не про зрение: клавиатура, время, мигание, ошибки форм, предсказуемость.
Путать критерии и techniques. W3C публикует ещё и «техники» (конкретные способы выполнить критерий). Они информативны и необязательны: способ можно выбрать любой, обязателен результат.
Заявлять соответствие после автопроверки. Автоматика проверяет лишь часть критериев — об этом следующий урок.

Итоги

WCAG переводит доступность из области вкуса в область проверяемых критериев с номерами.
Четыре принципа POUR: воспринимаемость, управляемость, понятность, надёжность.
Актуальная версия — WCAG 2.2 (2023), 86 критериев успеха.
A — минимум, AA — реальный ориентир индустрии и законов, AAA — планка для отдельных мест, а не для всего сайта.
Ключевые числа, которые стоит помнить наизусть: контраст 4.5:1 (текст), 3:1 (крупный текст и элементы интерфейса), цель нажатия 24×24.