Чек-лист соответствия сайта ADA

Официального чек-листа ADA для сайтов нет. В руководстве Министерства юстиции США по веб-доступности DOJ ссылается на существующие технические стандарты — WCAG и Section 508 Standards — и перечисляет типичные барьеры: слабый контраст, изображения без альтернативного текста, видео без субтитров, недоступные формы и навигация только мышью. Этот чек-лист превращает WCAG 2.2 уровня AA в практические проверки, сгруппированные по областям, для сайта компании или интернет-магазина. Это общая информация, не юридическая консультация, и прохождение чек-листа ничего не удостоверяет.

Чек-лист можно скачать в PDF ниже.

Как пользоваться чек-листом

1. Выберите важные страницы: главную, страницу категории или коллекции, страницу товара или услуги, корзину, оформление заказа, личный кабинет, форму обратной связи и одну длинную страницу с текстом.
2. Сначала запустите автоматическую проверку. Наша бесплатная проверка сайта на ADA примерно за минуту находит многие ошибки на уровне кода; пункты с пометкой (авто) ниже она частично охватывает.
3. Пройдите ручные пункты с клавиатурой, программой экранного доступа и масштабированием в браузере.
4. Записывайте, что нашли и исправили, с датами. Такая запись пригодится в любом случае.

Номера критериев в скобках относятся к WCAG 2.2.

Изображения и графика

• [ ] У каждого информативного изображения есть текстовая альтернатива (авто: наличие), которая описывает его содержание или назначение (1.1.1).
• [ ] У декоративных изображений пустой alt, чтобы программы экранного доступа их пропускали (1.1.1).
• [ ] Ссылки-картинки и кнопки-иконки говорят, куда ведут или что делают: «Корзина», а не «иконка» (1.1.1, 2.4.4) (авто).
• [ ] Текст не показан картинкой, кроме логотипов (1.4.5).
• [ ] У графиков и инфографики рядом есть текстовое резюме (1.1.1).

Цвет и контраст

• [ ] Основной текст имеет контраст не ниже 4,5:1, крупный текст — 3:1 (1.4.3) (авто). Пары цветов проверяйте проверкой контраста.
• [ ] Иконки, рамки полей и индикаторы фокуса имеют контраст не ниже 3:1 с фоном (1.4.11).
• [ ] Цвет никогда не единственный способ передать информацию — например, обязательные поля, ошибки или цены со скидкой (1.4.1).

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

• [ ] Каждая ссылка, кнопка, меню, слайдер и поле формы работают с Tab, Shift+Tab, Enter, пробелом и стрелками (2.1.1).
• [ ] Вы нигде не застреваете: ни во всплывающем окне, ни в виджете чата, ни в видеоплеере (2.1.2).
• [ ] Фокус всегда видим (2.4.7) и не прячется за липкой шапкой или cookie-баннером (2.4.11).
• [ ] Порядок фокуса совпадает с визуальным порядком (2.4.3).
• [ ] Ссылка «Перейти к содержимому» или ориентиры (landmarks) позволяют пропустить навигацию (2.4.1).

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

• [ ] У каждого поля есть видимая подпись, связанная с ним в коде (1.3.1, 3.3.2, 4.1.2) (авто: связь).
• [ ] Поля адреса, email и оплаты используют атрибуты autocomplete (1.3.5) (авто: допустимые значения).
• [ ] Ошибки описаны текстом, рядом с полем, с подсказкой, как их исправить (3.3.1, 3.3.3).
• [ ] Заказ и платёж можно проверить и исправить, прежде чем они станут окончательными (3.3.4).
• [ ] Вход не требует решать головоломку или запоминать код без альтернативы — например, вставки из буфера или менеджера паролей (3.3.8).
• [ ] Уже введённые данные не запрашиваются повторно в том же процессе (3.3.7).

Структура и навигация

• [ ] У каждой страницы уникальный, понятный заголовок (2.4.2) (авто: наличие).
• [ ] Заголовки образуют логичную структуру, списки и таблицы сделаны настоящей разметкой (1.3.1, 2.4.6).
• [ ] Указан язык страницы (3.1.1) (авто).
• [ ] Навигация и ссылки на помощь находятся на одном и том же месте на каждой странице (3.2.3, 3.2.6).
• [ ] Найти страницу можно несколькими способами — меню, поиском или картой сайта (2.4.5).
• [ ] Текст ссылки понятен в контексте — никаких голых «нажмите здесь» (2.4.4).

Вёрстка, масштаб и мобильные устройства

• [ ] При масштабе 200 % текст не обрезается (1.4.4); при 400 % или ширине 320 пикселей ничего не требует горизонтальной прокрутки (1.4.10).
• [ ] Сайт работает в портретной и альбомной ориентации (1.3.4).
• [ ] Кнопки и ссылки не меньше 24 на 24 CSS-пикселя или отстоят друг от друга (2.5.8) (авто).
• [ ] Всё, что делается перетаскиванием, например ползунок цены, работает и простыми касаниями или кликами (2.5.7).
• [ ] Содержимое, которое появляется при наведении или фокусе, можно закрыть, и оно не исчезает, пока над ним указатель (1.4.13).

Видео, аудио и движение

• [ ] У записанных видео есть точные субтитры (1.2.2) и аудиодескрипция или расшифровка (1.2.3, 1.2.5).
• [ ] Ничто не воспроизводит звук автоматически дольше трёх секунд без возможности его остановить (1.4.2).
• [ ] Карусели и анимации можно поставить на паузу (2.2.2), и ничто не мигает чаще трёх раз в секунду (2.3.1).
• [ ] Перед окончанием сессии пользователя предупреждают и дают её продлить (2.2.1).

Проверка с программой экранного доступа

• [ ] С VoiceOver, NVDA или TalkBack можно выполнить основные задачи: найти товар, добавить в корзину, оформить заказ, связаться с вами.
• [ ] Сообщения о состоянии, такие как «Добавлено в корзину» или «3 результата», озвучиваются (4.1.3).
• [ ] Нестандартные элементы управления сообщают своё имя, роль и состояние, например «развёрнуто» (4.1.2) (авто: частично).

Документы и сторонний контент

• [ ] PDF, меню, прайс-листы и формы, на которые вы ссылаетесь, доступны или есть в доступном формате — см. как проверить доступность PDF.
• [ ] Встроенные виджеты — чат, отзывы, бронирование, карты — проходят те же проверки с клавиатурой и программой экранного доступа.
• [ ] Вы не полагаетесь на оверлей-виджет, чтобы «исправить» сайт; см. почему оверлеи — не решение.

Публикация и поддержка

• [ ] Страница о доступности объясняет, что вы сделали и как сообщить о барьере.
• [ ] Вы проверяете сайт заново после обновлений темы, плагинов и приложений, а не один раз.

От чек-листа к аудиту соответствия ADA

Этот список — самопроверка. Чек-лист аудита ADA, которым пользуется эксперт, проходит каждый критерий WCAG уровней A и AA на заданной выборке страниц и заканчивается письменным отчётом — см. аудит доступности. Федеральные заказчики могут также попросить проверку по Section 508 или ACR на основе VPAT. Полный список по критериям — в чек-листе WCAG 2.2; правовой фон — в обзоре требований ADA к сайтам.

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

Источники

• ADA.gov, Guidance on Web Accessibility and the ADA: https://www.ada.gov/resources/web-guidance/
• ADA.gov, Fact sheet on the Title II web and mobile app rule: https://www.ada.gov/resources/2024-03-08-web-rule/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/

Частые вопросы

Есть ли официальный чек-лист ADA для сайтов?

Нет. В ADA нет технического чек-листа для сайтов частного бизнеса. Министерство юстиции США ссылается на WCAG и Section 508 Standards; этот чек-лист следует WCAG 2.2 уровня AA.

Если я прошёл весь чек-лист, мой сайт соответствует ADA?

Этого не может обещать ни один чек-лист. Он помогает найти и устранить самые частые барьеры и задокументировать вашу работу. О вашей правовой позиции поговорите с юристом.

Какой уровень WCAG должен использовать чек-лист ADA?

Уровень AA. Правило DOJ по Title II для властей штатов и местного самоуправления принимает WCAG 2.1 AA, а для сайтов бизнеса обычным ориентиром служит WCAG 2.1 или 2.2 AA. WCAG 2.2 AA включает почти весь 2.1 AA; см. WCAG 2.1 и 2.2.

Можно ли скачать чек-лист в PDF?

Да. Ссылка на PDF-версию чек-листа есть на этой странице: его можно распечатать или передать разработчику или студии.

Чем аудит соответствия ADA отличается от этого чек-листа?

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