Что нового в WCAG 2.2? Девять новых критериев простыми словами

Человек, который пользуется клавиатурой, проходит клавишей Tab по вашему оформлению заказа. Фокус попадает на кнопку «Оплатить», но сверху её закрывает закреплённый баннер о cookie, и человек не видит, где находится. По WCAG 2.1 такая страница могла пройти проверку. По WCAG 2.2 — нет.

Именно такие пробелы закрывает обновление 2.2. Ниже каждый новый критерий успешности разобран по одной схеме: что он требует, кому помогает, как быстро проверить и как обычно исправить. Четыре принципа и уровни на одной странице собраны в нашем справочнике по WCAG 2.2.

Что такое WCAG 2.2?

WCAG 2.2 — актуальная версия Руководства по обеспечению доступности веб-контента (Web Content Accessibility Guidelines), стандарта W3C, на который ссылается большинство законов и договоров о доступности. Она получила статус рекомендации W3C 5 октября 2023 года (откроется в новой вкладке), была обновлена 12 декабря 2024 года (откроется в новой вкладке) и в октябре 2025 года утверждена как ISO/IEC 40500:2025 (откроется в новой вкладке).

WCAG состоит из проверяемых утверждений — критериев успешности, у каждого из которых есть уровень: A (минимум), AA (то, чего обычно требуют законы) или AAA (самый строгий). «Нам нужен WCAG 2.2 AA» означает: все критерии уровней A и AA версии 2.2. В спецификации сказано, что 2.2 «основана на WCAG 2.1 и обратно совместима с ней», то есть дополняет 2.1, а не заменяет её.

Что изменилось по сравнению с WCAG 2.1?

WCAG 2.2 добавляет девять критериев успешности и удаляет один. Шесть новых относятся к уровню A или AA, поэтому входят в привычную цель AA: 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 и 3.3.8. Остальные три — уровня AAA. Удалён критерий 4.1.1 «Синтаксический анализ» (Parsing), который W3C теперь называет устаревшим.

Критерий 4.1.1 «Синтаксический анализ» проверял ошибки разметки, например повторяющиеся ID. В FAQ по WCAG 2 (откроется в новой вкладке) объясняется, что теперь такие проблемы подпадают под другие критерии, например 4.1.2 «Имя, роль, значение». Есть нюанс: если договор всё ещё требует WCAG 2.0 или 2.1, вам, возможно, «придётся и дальше проверять критерий 4.1.1 и отчитываться по нему».

«Фокус не скрыт» и «Внешний вид фокуса»: видят ли пользователи клавиатуры, где они находятся?

Эти критерии следят за тем, чтобы элемент с фокусом клавиатуры оставался видимым. На уровне AA (2.4.11) ссылка или кнопка в фокусе не должна полностью скрываться контентом, который добавили вы: закреплённой шапкой, баннером о cookie или значком чата. На уровне AAA ничто не должно перекрывать никакую её часть (2.4.12), а контур фокуса должен быть крупным и заметно контрастным (2.4.13).

• Кому помогает: зрячим людям, которые пользуются клавиатурой вместо мыши, часто из-за нарушений моторики. Если фокус не виден, им приходится угадывать.
• Быстрая проверка: откройте длинную страницу так, чтобы были видны баннер о cookie, закреплённая шапка и виджет чата, и несколько раз нажмите Tab. Если фокус полностью исчезает за каким-то элементом, это нарушение 2.4.11.
• Обычное исправление: добавьте CSS-свойство scroll-padding, равное высоте закреплённой шапки или подвала, чтобы при прокрутке браузер не оставлял элементы в фокусе под ними. W3C называет это достаточной техникой (откроется в новой вкладке). Баннер также проходит проверку, если он модальный и его нужно сначала закрыть.

«Внешний вид фокуса» (2.4.13) требует индикатора площадью не меньше контура толщиной 2 CSS-пикселя вокруг компонента и с изменением контраста не менее 3:1 между состояниями с фокусом и без него. Это уровень AAA, но сплошной контур в 2 пикселя яркого цвета обычно его обеспечивает. Как измерить 3:1, объясняет наше руководство по цветовому контрасту.

«Перетаскивание» и «Размер области нажатия»: можно ли пользоваться сайтом без точного наведения?

Эти два критерия уровня AA помогают людям, которым трудно точно управлять указателем. 2.5.7 требует, чтобы всё, что делается перетаскиванием, работало и с одиночными щелчками или касаниями. 2.5.8 требует, чтобы области нажатия были не меньше 24 на 24 CSS-пикселя или располагались так, чтобы круг диаметром 24 пикселя с центром на каждой из них не касался соседней.

2.5.7 Перетаскивание

Вспомните ползунок диапазона цен в фильтрах магазина или список избранного, порядок в котором меняют перетаскиванием. Человеку с тремором или тому, кто управляет указателем с помощью головы, нажать, удержать, передвинуть и отпустить бывает очень трудно.

Быстрая проверка: выполните каждое действие с перетаскиванием только щелчками или касаниями. Обычное исправление: позвольте щёлкать в любом месте шкалы ползунка, добавьте рядом поля «от» и «до» или кнопки «Выше» и «Ниже» в сортируемые списки. Одной поддержки клавиатуры недостаточно: в пояснительном документе (откроется в новой вкладке) W3C сказано, что клавиатурная альтернатива «не означает автоматического выполнения этого критерия успешности».

2.5.8 Размер области нажатия (минимум)

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

• Исключения: ссылки внутри предложения, элементы, у которых есть равнозначный элемент управления подходящего размера в другом месте страницы, элементы управления, размер которых задаёт браузер и которые вы не переоформляли, а также случаи, когда определённый размер принципиально важен или требуется по закону.
• Быстрая проверка: на телефоне попробуйте нажать каждый маленький значок и кнопку; чтобы измерить элемент, откройте его в инструментах разработчика браузера.
• Обычное исправление: добавьте внутренние отступы (padding). Область нажатия увеличится, даже если значок выглядит так же. И считайте 24 пикселя нижней границей: более старый критерий уровня AAA 2.5.5 требует 44 на 44.

«Единообразная помощь» и «Повторный ввод»: не заставляете ли вы людей искать и повторяться?

Оба критерия — уровня A. 3.2.6 «Единообразная помощь» требует: если справка — контакты, чат или ссылка на FAQ — есть на нескольких страницах, она каждый раз должна стоять в том же порядке относительно остального содержимого страницы. 3.3.7 «Повторный ввод» требует, чтобы людям не приходилось заново вводить данные, которые они уже указали в рамках того же процесса.

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

«Повторный ввод» касается многошаговых форм. Форма бронирования, которая спрашивает e-mail на первом шаге и ещё раз на третьем, не проходит проверку; то же касается оформления заказа, где приходится заново вводить совпадающий адрес для выставления счёта. Заполняйте поле автоматически или давайте выбрать ранее введённое, например флажком «Адрес для счёта совпадает с адресом доставки». Исключения: повторный ввод принципиально необходим, нужен для безопасности или прежние данные больше не действительны.

«Доступная аутентификация»: можно ли войти без проверки памяти?

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

WCAG определяет тест когнитивных функций как «задачу, которая требует от пользователя запомнить, обработать или переписать информацию». Ввод имени, адреса электронной почты или номера телефона к таким тестам не относится: эти данные принадлежат вам и везде одинаковы. Шаг входа соответствует уровню AA, если предлагает хотя бы одно из следующего:

• Альтернативный способ без когнитивного теста, например ключ доступа (passkey) или ссылку по электронной почте.
• Механизм помощи, например поддержку менеджеров паролей или копирование и вставку, чтобы одноразовый код не приходилось перепечатывать.
• Распознавание объектов, например «выберите изображения с велосипедом».
• Личный контент, например выбор изображения, которое вы сами загрузили.

Версия уровня AAA, 3.3.9, убирает два последних варианта, поэтому CAPTCHA с картинками может пройти на уровне AA, но не на AAA. Типичные нарушения: поля пароля, которые блокируют вставку или менеджеры паролей, поля одноразового кода, которые ломаются при вставке, и текстовая CAPTCHA без альтернативы. Больше всего выигрывают люди с дислексией или нарушениями памяти, но проблему узнает любой, кто хоть раз не смог войти в конце долгого дня.

Обязателен ли WCAG 2.2 по закону?

Зависит от того, где вы и кто вы. Законы редко прямо называют версию WCAG, и многие до сих пор ссылаются на WCAG 2.1 AA. Поскольку WCAG 2.2 обратно совместим, соответствие 2.2 AA означает и соответствие 2.1 AA, за исключением удалённого 4.1.1. Цель 2.2 покрывает обе версии. Если версия указана в договоре, следуйте договору.

• Европейский союз: по Европейскому акту о доступности соответствие презюмируется, если вы выполняете гармонизированный стандарт EN 301 549. По данным AccessibleEU (откроется в новой вкладке), версия 4.1.1, опубликованная в сентябре 2026 года, переходит на WCAG 2.2, но пока не является юридическим ориентиром; до публикации ссылки на неё в Официальном журнале ЕС действует v3.2.1 (на основе WCAG 2.1 AA). На кого распространяется акт, рассказывает наш разбор Европейского акта о доступности.
• Великобритания: согласно руководству правительства (откроется в новой вкладке), сайты и приложения государственного сектора должны соответствовать WCAG 2.2 AA. Это руководство касается государственных органов, а не частного бизнеса.
• США: правило Министерства юстиции для властей штатов и местного самоуправления опирается на WCAG 2.1 AA, а сроки его выполнения в апреле 2026 года перенесли (откроется в новой вкладке) на 26 апреля 2027 и 26 апреля 2028 года. Для частного бизнеса руководство министерства 2022 года (откроется в новой вкладке) говорит, что ADA распространяется на их сайты, но не устанавливает конкретного технического стандарта.

А как же WCAG 3?

WCAG 3 — черновик, поэтому соответствовать ему пока невозможно. W3C опубликовал обновлённые черновики в сентябре 2026 года и сообщает, что готовым стандартом WCAG 3 станет, по ожиданиям, лишь «через несколько лет». WCAG 2 не будет объявлен устаревшим ещё несколько лет после этого, так что ориентироваться сейчас нужно на 2.2.

Как проверить новые критерии за 15 минут?

Большинство нарушений шести критериев уровней A и AA можно найти примерно за 15 минут с клавиатурой, телефоном и вашей собственной страницей входа. Это не заменит полного аудита или тестирования с участием людей с инвалидностью, но подскажет, с чего начать, и даст разработчику конкретный список задач.

1. Пройдите клавишей Tab по главной странице, карточке товара и оформлению заказа при всех открытых баннерах. Фокус всегда виден? (2.4.11)
2. Выполните каждое действие с ползунком или перетаскиванием только щелчками или касаниями. (2.5.7)
3. На телефоне попробуйте нажать каждую кнопку закрытия, номер страницы и маленький значок. (2.5.8)
4. Сравните, где находятся справка и контакты на страницах трёх типов. (3.2.6)
5. Пройдите покупку или бронирование и отметьте каждый вопрос, на который отвечаете дважды. (3.3.7)
6. Войдите с помощью менеджера паролей, затем вставьте пароль и одноразовый код. Есть ли у каждой CAPTCHA альтернатива? (3.3.8)

Об остальных требованиях WCAG рассказывает наше руководство «Как проверить доступность сайта» — бесплатные инструменты и ручные проверки, а чек-лист доступности сайта превращает частые ошибки в список дел. Всё, что пока исправить не получается, должно попасть в ваше заявление о доступности.

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