Чек-лист WCAG 2.2 для сайтов и интернет-магазинов

Изображения и медиа

• У каждого информативного изображения есть осмысленный альтернативный текст; у декоративных — пустой alt.WCAG 1.1.1 · Частично автоматически
• Иконки и SVG-графика, несущие смысл, имеют текстовую альтернативу.WCAG 1.1.1 · Проверяется автоматически
• У видео есть субтитры; у чисто звукового контента — текстовая расшифровка.WCAG 1.2.1, 1.2.2 · Ручная проверка
• Звук не включается автоматически, или его можно поставить на паузу.WCAG 1.4.2 · Ручная проверка

Текст и цвет

• Контраст текста — не менее 4,5:1 (для крупного текста — 3:1).WCAG 1.4.3 · Проверяется автоматически
• Кнопки, границы полей форм и важные иконки имеют контраст не менее 3:1.WCAG 1.4.11 · Ручная проверка
• Информация не передаётся только цветом (обязательные поля, цены со скидкой, ошибки).WCAG 1.4.1 · Ручная проверка
• Страницу можно увеличить до 200 % без потери содержимого; масштабирование не отключено.WCAG 1.4.4 · Частично автоматически

Структура

• У каждой страницы задан язык (lang) и уникальный описательный заголовок (title).WCAG 3.1.1, 2.4.2 · Проверяется автоматически
• Заголовки образуют логичную структуру (один h1, без пропуска уровней).WCAG 1.3.1 · Частично автоматически
• Списки, таблицы и области страницы размечены правильным HTML.WCAG 1.3.1 · Частично автоматически

Клавиатура и фокус

• Каждой функцией можно пользоваться с одной лишь клавиатуры: меню, фильтры, корзина, оформление заказа.WCAG 2.1.1 · Ручная проверка
• Фокус клавиатуры всегда хорошо виден.WCAG 2.4.7 · Ручная проверка
• Во всплывающих окнах, чат-виджетах и cookie-баннерах нет клавиатурных ловушек.WCAG 2.1.2 · Ручная проверка
• Ссылка «Перейти к содержимому» или ориентиры (landmarks) позволяют пропускать повторяющиеся блоки.WCAG 2.4.1 · Частично автоматически
• Элемент в фокусе не скрывается за закреплёнными шапками или баннерами.WCAG 2.4.11 · Ручная проверка

Формы и оформление заказа

• У каждого поля формы есть видимая подпись (плейсхолдер не считается).WCAG 1.3.1, 3.3.2 · Проверяется автоматически
• Сообщения об ошибках объясняют, что не так и как это исправить.WCAG 3.3.1, 3.3.3 · Ручная проверка
• Поля имени, адреса и email используют autocomplete.WCAG 1.3.5 · Проверяется автоматически
• Вход и оформление заказа не требуют головоломок или тестов на память без альтернативы.WCAG 3.3.8 · Ручная проверка
• Пользователям не нужно повторно вводить данные, которые они уже указали.WCAG 3.3.7 · Ручная проверка

Ссылки и кнопки

• У ссылок и кнопок, включая кнопки-иконки, понятные названия.WCAG 2.4.4, 4.1.2 · Проверяется автоматически
• Области нажатия — не меньше 24 × 24 CSS-пикселей, или между ними достаточно места.WCAG 2.5.8 · Проверяется автоматически
• Для действий перетаскиванием есть альтернатива в один клик.WCAG 2.5.7 · Ручная проверка

Динамический контент

• Сообщения о статусе («добавлено в корзину», ошибки) озвучиваются скринридерами.WCAG 4.1.3 · Ручная проверка
• Карусели и анимацию можно остановить; ничего не мигает чаще трёх раз в секунду.WCAG 2.2.2, 2.3.1 · Ручная проверка
• Ограничения по времени можно продлить или отключить.WCAG 2.2.1 · Ручная проверка

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