Доступность сайта в 2026 году: WCAG 2.2, требования EAA и практический чек-лист

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

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

Если нужно оценить весь путь к заявке или покупке, начните с UX-аудита сайта. Здесь сосредоточимся именно на accessibility.

Короткий ответ

Для нового проекта включите WCAG 2.2 уровня AA в дизайн, контент, разработку и приемочное тестирование. Для действующего сайта сначала проверьте ключевые сценарии: навигацию, поиск, формы, корзину, checkout, вход в кабинет и документы.

Автоматический сканер находит лишь часть проблем. Добавьте проверку с клавиатуры, увеличение до 200%, экранный диктор и прохождение задач на реальном телефоне. В первую очередь исправляйте блокирующие ошибки.

Что такое WCAG 2.2

WCAG 2.2 является рекомендацией W3C для доступности веб-контента. Она основана на четырех принципах:

Уровень A закрывает базовые барьеры. AA считается практической целью для коммерческого сайта. AAA содержит более строгие критерии, но полное соответствие этому уровню не всегда реалистично для всего продукта.

UI отвечает за контраст, состояния и масштабирование, а UX охватывает логику сценария и понятность взаимодействия. Разницу объясняет статья UI или UX: что важнее для сайта.

Что добавила WCAG 2.2

WCAG 2.2 добавила девять критериев. Для бизнес-сайтов особенно заметны следующие требования:

• фокус не должен полностью скрываться за липкой шапкой, баннером или диалогом;
• индикатор фокуса должен быть хорошо виден;
• цель нажатия на уровне AA должна иметь размер не менее 24 на 24 CSS-пикселя или достаточное расстояние с учетом исключений;
• функция с перетаскиванием должна иметь альтернативу без drag gesture;
• способы получения помощи должны появляться последовательно;
• интерфейс не должен без причины требовать повторного ввода уже полученных данных;
• аутентификация не должна зависеть только от когнитивного теста, который нужно решить или запомнить.

Доступность касается не только цвета и alt. Она включает реальное поведение интерфейса.

EAA и сайты бизнеса

European Accessibility Act охватывает определенные товары и услуги в ЕС, включая электронную коммерцию, банковские услуги, электронные книги, часть транспортных и коммуникационных сервисов. Точные обязанности зависят от страны, бизнес-модели, услуги и предусмотренных исключений.

В сентябре 2026 года опубликовали EN 301 549 v4.1.1 на основе WCAG 2.2. На дату подготовки статьи новая версия еще не стала гармонизированным стандартом, официально указанным в Official Journal of the European Union. Для юридической оценки нужно проверить национальную реализацию EAA и действующий гармонизированный стандарт.

Если сайт продает потребителям в ЕС, не ждите жалобы. Используйте WCAG 2.2 AA как цель развития, сохраняйте результаты тестов и обратитесь к юристу за оценкой конкретных обязанностей.

Практический чек-лист доступности

1. Семантическая структура

Используйте один содержательный H1, последовательные H2 и H3, настоящие списки, таблицы только для табличных данных и корректные landmark-области. Кнопка должна быть кнопкой, а ссылка должна вести на другую страницу или ресурс.

Не заменяйте семантику кликабельным div. Экранный диктор должен понимать роль, название и состояние элемента.

2. Навигация с клавиатуры

Уберите мышь и пройдите страницу клавишами Tab, Shift+Tab, Enter, Space и Escape. Фокус должен двигаться логично. Меню, фильтры, слайдеры, диалоги, формы и checkout обязаны работать без курсора.

Скрытая точка фокуса или keyboard trap могут полностью заблокировать действие.

3. Видимый фокус

Не отключайте outline без равноценной замены. Фокус должен быть виден на светлом и темном фоне, отличаться от hover и не скрываться под sticky-элементами.

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

4. Контраст и цвет

Для обычного текста используйте контраст не ниже 4,5:1, для крупного текста не ниже 3:1. Контролы, границы полей и значимые графические состояния тоже требуют достаточного контраста.

Не передавайте смысл только цветом. Ошибка формы требует текста или иконки с доступным названием.

5. Масштабирование и reflow

Увеличьте страницу до 200%. Текст не должен обрезаться, элементы не должны перекрываться, а обычный контент не должен требовать горизонтальной прокрутки на узком экране.

Не запрещайте пользователю масштабировать viewport.

6. Изображения, иконки и видео

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

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

7. Формы и ошибки

У каждого поля должен быть видимый label. Placeholder исчезает после ввода и не заменяет подпись. Объясните формат до возникновения ошибки.

После отправки назовите проблемное поле, подскажите исправление и переместите фокус к сводке ошибок или первому неверному полю. Не очищайте правильные значения.

8. Меню, диалоги и карусели

Передавайте состояние компонента с помощью подходящей семантики, например aria-expanded или aria-current. Escape закрывает диалог, а фон за ним не остается доступным для фокуса.

Автоматическую карусель нужно уметь остановить. Кнопкам нужны понятные названия, а смена слайда не должна красть фокус.

9. Мобильные цели и жесты

Сделайте кнопки достаточно крупными и оставьте расстояние между соседними действиями. Не требуйте только свайп, перетаскивание или сложный жест. Добавьте обычные кнопки.

Экранная клавиатура не должна закрывать активное поле, основную кнопку или ошибку.

10. Вход и подтверждение личности

Разрешите менеджеры паролей, вставку и автозаполнение. Не блокируйте их без реальной причины. Если CAPTCHA создает барьер, предоставьте доступную альтернативу.

Код из письма или SMS удобнее принимать через автозаполнение и вставку, а не через запоминание.

11. PDF и документы

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

Для ключевой информации дайте также HTML-версию.

12. Скорость и стабильность

Медленная реакция и скачки макета усложняют взаимодействие, особенно при увеличении и моторных или когнитивных трудностях.

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

Как провести аудит

Проверяйте шаблоны, а не случайные страницы. Включите главную, услугу, категорию, карточку товара, поиск, форму, корзину, checkout, кабинет и документы.

Используйте четыре уровня:

1. автоматический скан очевидных ошибок;
2. ручной проход клавиатурой;
3. проверка экранным диктором;
4. тест на реальном телефоне с увеличением и системными настройками.

Записывайте URL, элемент, критерий, шаги воспроизведения, влияние, доказательство, рекомендацию, ответственного и статус.

Автоматические инструменты не дают гарантии

Lighthouse, axe, WAVE и похожие сканеры находят отсутствующие названия, часть проблем контраста и ошибки структуры. Они не определят, понятен ли текст кнопки, логичен ли порядок фокуса, полезен ли alt и можно ли завершить оплату.

Чистый автоматический отчет означает только то, что инструмент не нашел известных машинно определяемых ошибок.

Как расставить приоритеты

Не начинайте с сотен отдельных alt, пока checkout не работает без мыши.

Как заложить доступность в новый сайт

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

Структуру можно взять из руководства про техническое задание на сайт. Проверяйте компоненты в дизайн-системе, а не ремонтируйте одну кнопку на десятках страниц.

Действующему проекту часто подходит поэтапный редизайн критических шаблонов. UI/UX-дизайн BB STUDIO охватывает структуру, адаптивные макеты и состояния компонентов, а разработка сайтов превращает требования в рабочий код.

План на 30 дней

Дни 1-5

• определить ключевые сценарии и шаблоны;
• запустить автоматическую проверку;
• пройти сайт с клавиатуры;
• проверить формы, меню, корзину и checkout;
• собрать критические блокеры.

Дни 6-15

• исправить семантику и названия контролов;
• восстановить видимый фокус;
• исправить контраст и ошибки;
• настроить диалоги и меню;
• повторить тест с экранным диктором.

Дни 16-25

• улучшить мобильные цели, масштабирование и reflow;
• добавить субтитры, alt и доступные документы;
• проверить checkout, вход и восстановление пароля;
• протестировать несколько браузеров и устройств.

Дни 26-30

• повторить критические сценарии;
• зафиксировать оставшиеся проблемы;
• добавить accessibility в критерии приемки;
• назначить ответственных за контент и компоненты;
• запланировать проверки после релизов.

Типичные ошибки

1. Установить overlay-виджет и считать работу законченной.
2. Ориентироваться на один автоматический балл.
3. Убрать стандартный outline без замены.
4. Использовать placeholder вместо label.
5. Добавлять ARIA вместо исправления HTML.
6. Тестировать только главную страницу.
7. Игнорировать checkout, кабинет и PDF.
8. Требовать drag, swipe или сложный жест.
9. Исправлять мелочи раньше блокеров.
10. Не проводить повторный тест после обновлений.

Вывод

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

Начните с действий, которые создают ценность: поиск, заявка, корзина, оплата и вход. Если нужен аудит или план исправлений, напишите BB STUDIO.