Чек-лист WCAG 2.2 AA для интернет-магазина
Обновлено 12 октября 2026 г. · 3 мин чтения
Чек-лист WCAG 2.2 AA для интернет-магазина — это список проверок, которые помогают понять, могут ли покупатели с разными нарушениями найти товар и оформить заказ. Ниже — главные пункты с номерами критериев WCAG и пометкой, что находит автоматическая проверка, а что нужно проверить руками.
Обозначения: А — автоматика обычно находит; Ч — нужен человек; А+Ч — автоматика находит часть, остальное вручную.
Текст и цвета
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
| Контраст обычного текста не ниже 4,5:1, крупного — 3:1 | 1.4.3 | А |
| Контраст иконок, границ полей и состояний кнопок не ниже 3:1 | 1.4.11 | Ч |
| Информация передаётся не только цветом (например, «поля с ошибкой выделены красным» плюс текст) | 1.4.1 | Ч |
| Текст можно увеличить до 200% без потери содержимого | 1.4.4 | Ч |
| При ширине 320 px не нужна горизонтальная прокрутка | 1.4.10 | Ч |
Изображения и медиа
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
| У картинок товаров есть атрибут alt | 1.1.1 | А |
| Альтернативный текст описывает товар по смыслу, а не «IMG_2034» | 1.1.1 | Ч |
Декоративные картинки скрыты от экранного диктора (alt="") |
1.1.1 | А+Ч |
| У видео есть субтитры | 1.2.2 | Ч |
Формы: поиск, корзина, оформление заказа
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
| У каждого поля есть подпись | 1.3.1, 4.1.2 | А |
Для полей с данными покупателя указан autocomplete |
1.3.5 | А+Ч |
| Ошибка ввода описана текстом и понятно, как её исправить | 3.3.1, 3.3.3 | Ч |
| Повторно не нужно вводить уже введённые данные (например, адрес доставки для оплаты) | 3.3.7 (новый в 2.2) | Ч |
| Вход не требует решать когнитивную задачу без альтернативы; можно вставить пароль из менеджера | 3.3.8 (новый в 2.2) | Ч |
Кнопки и ссылки
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
| У кнопок-иконок (корзина, поиск, закрыть) есть доступное название | 4.1.2 | А |
| У ссылок есть понятный текст, а не только «подробнее» | 2.4.4 | А+Ч |
| Размер кликабельной цели не меньше 24×24 CSS-пикселя или достаточный отступ вокруг | 2.5.8 (новый в 2.2) | А+Ч |
| Действия, требующие перетаскивания (слайдер цены), можно выполнить и без него | 2.5.7 (новый в 2.2) | Ч |
Клавиатура и фокус
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
| Весь путь от поиска до оплаты проходится только клавиатурой | 2.1.1 | Ч |
| Нет «ловушек» фокуса: из всплывающего окна можно выйти клавишей Esc или Tab | 2.1.2 | Ч |
| Порядок перехода по Tab логичен | 2.4.3 | Ч |
| Фокус всегда виден | 2.4.7 | Ч |
| Элемент в фокусе не перекрыт закреплённой шапкой, баннером cookie или чатом | 2.4.11 (новый в 2.2) | Ч |
| Есть ссылка «перейти к содержимому» или другие способы обойти повторяющиеся блоки | 2.4.1 | А+Ч |
Структура и язык
| Проверка | Критерий WCAG | Кто находит |
|---|---|---|
У страницы указан язык (lang) |
3.1.1 | А |
У страницы есть осмысленный заголовок <title> |
2.4.2 | А+Ч |
| Заголовки h1–h6 отражают структуру | 1.3.1, 2.4.6 | А+Ч |
| Атрибуты ARIA используются правильно | 4.1.2 | А |
| Помощь (чат, телефон, ссылка на контакты) находится на одном и том же месте на всех страницах | 3.2.6 (новый в 2.2) | Ч |
Типичные ловушки интернет-магазинов
- Баннер cookie и виджет чата перекрывают элемент в фокусе (2.4.11).
- Выбор размера или цвета сделан картинками без названий.
- Карусели прокручиваются сами и не останавливаются.
- Фильтры каталога с ползунком, который работает только мышью (2.5.7).
- Мелкие иконки удаления товара из корзины (2.5.8).
- Сторонние платёжные формы, которые вы не контролируете: проверьте их тоже и сообщите поставщику о проблемах.
Как пользоваться чек-листом
- Запустите автоматическую проверку и исправьте всё, что она нашла: обычно это быстрые правки в шаблоне. Начните с бесплатной проверки одной страницы.
- Пройдите ключевой сценарий покупки только с клавиатуры.
- Проверьте увеличение до 200% и мобильную ширину.
- Запишите, что осталось, в раздел «известные ограничения» информации о доступности.
Подробно о новых критериях — в статье «WCAG 2.2: что изменилось». Зачем это всё по закону — в руководстве по European Accessibility Act. Частые ошибки на практике — в статье «10 частых ошибок доступности».
Наш сервис — это автоматическая проверка, а не полный аудит, и не юридическая консультация.