Доступность вглубь: WCAG 2.2 и проход по странице

WCAG 2.2 — международный стандарт доступности веб-содержимого с критериями уровней A, AA и AAA. Его проверяют автоматикой, клавиатурой и диктором.

Что в первом проходе упущено

В уроке о доступности вы сделали первый проход: alt, подписи полей, порядок фокуса. Теперь посмотрим, как это устроено целиком. Начнём с исследования WebAIM Million, которое вы там встречали. В отчёте 2026 года ошибки WCAG 2 нашлись примерно у 96 процентов, в среднем больше пятидесяти на страницу. Шесть самых частых ошибок: низкий контраст текста (более 80 процентов страниц), нет alt у изображений (больше половины), нет подписи у поля (около половины), пустые ссылки, пустые кнопки и не указан язык страницы. Все шесть вы умеете исправлять и находить. Это хорошая новость: основной вклад в доступность делают не редкие приёмы, а то, о чём в этой главе мы говорим давно.

Плохая новость: WCAG 2.2 требует больше, чем «alt и подписи». Разберём стандарт по частям.

Версии и уровни

Стандарт WCAG развивается версиями. 2.0 вышла в 2008 году, 2.1 в 2018-м добавила требования для мобильных устройств и слабовидящих, 2.2 стала рекомендацией W3C в октябре 2023 года. Версии совместимы вверх: страница, которая выполняет 2.2, выполняет и 2.1 (кроме одного отменённого пункта).

Критерии успеха (success criteria) собраны в принципы POUR, которые вы знаете, и делятся по уровням: A (самый необходимый минимум), AA (обычная цель) и AAA (самое строгое, достижимо не всегда). Требование «соответствует WCAG 2.2 AA» значит: страница выполняет все критерии A и AA, а их в версии 2.2 пятьдесят пять. Выполнить половину и назвать это соответствием нельзя.

Что нового в WCAG 2.2

Версия добавила девять критериев и убрала один (4.1.1 «Разбор», потому что современные браузеры сами справляются с ошибками разметки). Вот те, что вы встретите на обычном сайте.

• 2.4.11 Фокус не закрыт (AA). Когда вы нажимаете Tab, элемент в фокусе не должен целиком прятаться под фиксированной шапкой, баннером cookie или чатом. Лечение: scroll-padding-top у html на высоту фиксированной шапки, и баннеры, которые не закрывают страницу целиком.
• 2.5.7 Перетаскивание (AA). Если действие делается перетаскиванием (ползунок, сортировка списка), должен быть вариант без него: кнопки «вверх» и «вниз», поле для ввода числа.
• 2.5.8 Размер цели, минимум (AA). Цель касания (кнопка, ссылка, значок) не меньше 24 на 24 CSS-пикселя, а если меньше, то вокруг неё должно хватать свободного места. Пальцам удобнее 44 на 44, мышь с дрожью в руке тоже скажет спасибо.
• 3.2.6 Единая помощь (A). Контакты, чат, ссылка на справку стоят на всех страницах в одном и том же месте.
• 3.3.7 Повторный ввод (A). Не просите заново то, что человек уже вводил в этом процессе: адрес доставки дважды, например. Предложите подставить.
• 3.3.8 Доступный вход, минимум (AA). Вход не должен требовать запомнить пароль или решить головоломку, если нет обходного пути. На практике: разрешите вставку в поле пароля и автозаполнение менеджером паролей (части про аутентификацию и пасскеи), не заставляйте переписывать набор символов с картинки.

Остальные три критерия (2.4.12, 2.4.13 и 3.3.9) относятся к уровню AAA, их выполняют по желанию.

Проверьте себя: какой критерий WCAG 2.2 говорит, что элемент в фокусе нельзя прятать под фиксированной шапкой?

2.4.11 «Фокус не закрыт» (минимум), уровень AA. Лечится отступом прокрутки scroll-padding-top.

Что обычно проверяют, по темам

Критериев много, поэтому удобнее держать в голове темы. Для каждой тема из части про HTML и CSS у вас уже есть инструмент.

• Текст и цвет. Пороги из урока о цвете и контрасте: обычный текст не ниже 4,5 к 1, крупный (от 24 пикселей, жирный от 18,66) не ниже 3 к 1 (критерий 1.4.3); границы полей, значки и рамка фокуса не ниже 3 к 1 (1.4.11). Смысл не только цветом (1.4.1): к красной рамке нужны звёздочка или слово.
• Размер и ширина. Страница читается при увеличении текста до 200 процентов (1.4.4) и при ширине 320 CSS-пикселей без горизонтальной прокрутки (1.4.10, это то же, что 400 процентов на экране шириной 1280). Если на узком экране нужно прокручивать вбок, чтобы читать, это ошибка.
• Клавиатура. Всё, что делается мышью, делается клавишей (2.1.1). Нет ловушек фокуса (2.1.2). Порядок фокуса разумный (2.4.3). Фокус виден (2.4.7). Есть способ пропустить повторяющееся меню (2.4.1).
• Формы. Подпись у каждого поля (3.3.2, 1.3.1). Автозаполнение там, где это уместно: атрибут autocomplete (1.3.5). Ошибка названа словами и рядом с полем, с подсказкой, как исправить (3.3.1, 3.3.3), и объявляется диктору (4.1.3).
• Движение и время. Мигание не чаще трёх раз в секунду (2.3.1). То, что движется больше пяти секунд (карусель, видео-фон), можно остановить (2.2.2). Анимации учитывают prefers-reduced-motion, как в части про движение. Ограничение по времени можно продлить (2.2.1).
• Медиа. У видео субтитры, у аудио расшифровка (1.2.x).
• Язык. Язык страницы и фрагментов (3.1.1, 3.1.2): диктор выбирает голос по lang.
• Имя, роль, состояние. Нестандартный элемент сообщает диктору, что он такое и в каком состоянии (4.1.2). Об этом отдельно в следующем уроке.

Три прохода

Проверка доступности это не один инструмент, а три разных взгляда.

1. Автоматический. Lighthouse в Chrome (раздел «Доступность»), расширение axe DevTools, WAVE. Они быстро находят контраст, отсутствие alt, пустые ссылки, неправильные роли. Они находят часть проблем и никогда не скажут, что alt осмысленный или что порядок фокуса удобный. Ноль ошибок в Lighthouse не значит «доступно».
2. Клавиатурой. Уберите мышь. Пройдите всю страницу Tab, Shift+Tab, Enter, Пробелом и Esc. Видно ли, где фокус? Не застряли ли вы? Можно ли отправить форму? Затем увеличьте страницу до 200 процентов и сузьте окно до 320 пикселей.
3. Диктором. Включите программу чтения с экрана (NVDA на Windows бесплатна, VoiceOver есть в macOS и iOS, TalkBack в Android) и пройдите по основным действиям: что объявляется на кнопке, на поле, на ошибке. Подробнее об этом в следующем уроке.

Схема ниже: одна контактная страница с девятью недочётами. Для каждого видно, как он выглядит с трёх сторон, и сразу ясно, почему одной проверки мало.

Контактная страница с девятью недочётами. Выберите, как её проходите, и исправляйте по одному. Метка «WCAG 2.2» отмечает критерии, которые появились в версии 2.2.

Глаза и палецТолько клавиатураДиктор

• 1.4.3 Контраст текста (уровень AA)

  Светло-серый текст на белом, контраст 2 к 1. На солнце его не прочесть.

• 1.1.1 Текстовая альтернатива (уровень A)

  Скан документа виден.

• 3.3.2 Подпись поля (уровень A)

  Подсказка только внутри поля: начали печатать, и она исчезла.

• 2.4.7 Видимый фокус (уровень AA)

  Без отличий для мыши.

• 2.4.11 Фокус не закрыт (уровень AA)WCAG 2.2

  Фиксированная шапка закрывает верх экрана.

• 2.5.8 Размер цели (уровень AA)WCAG 2.2

  Крестик «закрыть» 16 на 16 пикселей. Пальцем попасть трудно, мышью с дрожью почти невозможно.

• 3.1.2 Язык фрагмента (уровень AA)

  Без отличий.

• 4.1.3 Сообщение о состоянии (уровень AA)

  После ошибки под полем появляется красный текст.

• 3.3.8 Доступный вход (уровень AA)WCAG 2.2

  Поле пароля запрещает вставку: нужно помнить и набирать.

Выполнено критериев: 0 из 9. Каждый недочёт виден лишь с одной-двух сторон: проверять нужно всеми тремя способами.

Текстовая альтернатива: схема перечисляет девять недочётов контактной страницы и для каждого описывает, как он выглядит для глаз и пальца, для клавиатуры и для диктора, до исправления и после. Низкий контраст видят только глаза, отсутствие рамки фокуса мешает клавиатуре, а подпись поля и сообщения об ошибке важны диктору.

Результат проверки лучше записывать как таблицу: критерий, где нарушен, насколько важно (мешает ли выполнить главное действие), как исправить, исправлено ли. Тогда вы исправляете сначала то, что мешает главному действию из брифа (записаться, купить, позвонить), а косметику оставляете на потом.

Проверьте себя: почему Lighthouse с нулём ошибок не доказывает доступность?

Автоматика ловит лишь часть критериев. Она не оценит, осмыслен ли alt, удобен ли порядок фокуса и понятны ли сообщения об ошибках. Это проверяют руками и диктором.

Практика

Вы в эпохе 2014 года: сайт стал адаптивным, и пора починить то, что мешает людям пользоваться им. Вам дана страница с недочётами из схемы и ещё несколькими. Исправьте их и запишите три проблемы, которые нашли сами, с номером критерия каждой.

Проверка смотрит на разметку и стили: на контраст текста и кнопки, размеры, рамку фокуса, подписи и языки. Чего она не видит, проверьте руками: откройте страницу, нажмите Tab и пройдите её без мыши, увеличьте до 200 процентов. Критерий считается выполненным только тогда, когда это получилось у вас.

Если ваш проект на конструкторе, выберите у него тему с высоким контрастом, проверьте цвета кнопок и убедитесь, что поля формы имеют подписи: в конструкторах это часто настраивается там же, где всё остальное.

Что было не так раньше

До WCAG 2.0 (2008) сайты доступными называли за наличие версии «для слабовидящих»: отдельной упрощённой страницы с чёрным по белому и огромным шрифтом. Её редко обновляли, и она отставала от основной. Сегодня мы знаем: отдельная версия не нужна, нужна одна страница, которая сделана правильно. А в 2.2 добавили то, о чём в 2008 не думали: пальцы на телефонах, фиксированные шапки и менеджеры паролей. Стандарт продолжает меняться; актуальную версию всегда проверяйте на сайте W3C.