Чек-лист ADA для сайту

Офіційного чек-листа ADA для сайтів не існує. Настанови Міністерства юстиції США щодо вебдоступності посилаються на наявні технічні стандарти — WCAG і Section 508 Standards — і перелічують типові бар'єри: слабкий контраст кольорів, зображення без alt-тексту, відео без субтитрів, недоступні форми й навігацію лише мишею. Цей чек-лист перетворює 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) (авто: зв'язок).
• [ ] Поля адреси, e-mail і оплати використовують атрибути 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 зі звітом. Цей чек-лист — практична самоперевірка; він охоплює найважливіші бар'єри, але не кожен критерій у деталях.