Чекліст доступності сайту за ADA (WCAG 2.1 AA)
Усі критерії успішності WCAG 2.1 рівнів A і AA: що перевірити і чи допоможе автоматичний інструмент. Позначайте кожен, коли ваш сайт його проходить.
Завантажити PDF
Безкоштовно, без e-mail. Роздрукуйте або поділіться посиланням.
- Критерії успішності
- 49
- Частково автоматично
- 21
- Ручна перевірка
- 28
Як користуватися чеклістом
- Спочатку запустіть автоматичну перевірку: вона швидко знаходить проблеми, позначені «частково автоматично».
- Потім пройдіть кожен критерій вручну: з клавіатурою, програмою зчитування з екрана і масштабом 200% і 400%.
- «Частково автоматично» означає, що інструмент перевіряє частину критерію; решту має підтвердити людина.
Використання цього чекліста не підтверджує, що сайт відповідає будь-якому закону.
1. Сприйманість
| № | Критерій успішності | Що перевірити | Перевірка |
|---|---|---|---|
| 1.1.1 | Нетекстовий вміст Рівень A · WCAG 2.0 | WCAG 1.1.1 вимагає альтернативний текст для кожного зображення, іконки та кнопки-зображення (рівень A). Як писати alt, коли він порожній, винятки й перевірка. | Частково автоматично |
| 1.2.1 | Лише аудіо та лише відеовміст (у записі) Рівень A · WCAG 2.0 | WCAG 1.2.1 вимагає транскрипт для аудіозаписів і текстову чи аудіоальтернативу для відео без звуку (рівень A). Що підходить, який є виняток і як перевірити. | Ручна перевірка |
| 1.2.2 | Супровідні написи (у записі) Рівень A · WCAG 2.0 | WCAG 1.2.2 вимагає субтитри для всіх записаних відео зі звуком (рівень A). Що мають містити субтитри, чому автоматичних замало і як їх перевірити на сайті. | Частково автоматично |
| 1.2.3 | Аудіоопис або альтернативні версії мультимедійних матеріалів (у записі) Рівень A · WCAG 2.0 | WCAG 1.2.3 вимагає аудіоопис або повну текстову альтернативу для записаного відео (рівень A). Що означає кожен варіант, коли нічого не треба і як це перевірити. | Ручна перевірка |
| 1.2.4 | Супровідні написи (в режимі реального часу) Рівень AA · WCAG 2.0 | WCAG 1.2.4 вимагає субтитри для відео наживо зі звуком, як-от вебінари та live shopping (рівень AA). Що вважають прямим ефіром, що не охоплено і як перевірити. | Ручна перевірка |
| 1.2.5 | Аудіоопис (у записі) Рівень AA · WCAG 2.0 | WCAG 1.2.5 вимагає аудіоопис для всіх записаних відео зі звуком (рівень AA). Коли він не потрібен, що таке розширений аудіоопис і як перевірити ваші відео. | Ручна перевірка |
| 1.3.1 | Інформація та взаємозв'язки Рівень A · WCAG 2.0 | WCAG 1.3.1 вимагає, щоб заголовки, списки, таблиці й мітки полів були розмічені в коді, а не лише стилізовані (рівень A). Типові помилки та перевірка. | Частково автоматично |
| 1.3.2 | Значуща послідовність Рівень A · WCAG 2.0 | WCAG 1.3.2 вимагає, щоб порядок вмісту в коді зберігав зміст, коли сторінку читають уголос (рівень A). Типові помилки CSS-верстки, перевірка й виправлення. | Ручна перевірка |
| 1.3.3 | Сенсорні характеристики Рівень A · WCAG 2.0 | WCAG 1.3.3: інструкції не можуть спиратися лише на форму, колір, розмір, місце чи звук, як «натисніть круглу кнопку» (рівень A). Приклади й перевірка. | Ручна перевірка |
| 1.3.4 | Орієнтація Рівень AA · WCAG 2.1 | WCAG 1.3.4: сайт не може блокувати портретну чи альбомну орієнтацію, якщо одна з них не є необхідною (рівень AA). Що це означає, як перевірити й виправити. | Частково автоматично |
| 1.3.5 | Призначення полів уведення Рівень AA · WCAG 2.1 | WCAG 1.3.5 вимагає, щоб поля для даних самого користувача, як-от ім'я чи email, вказували призначення через autocomplete (рівень AA). Які поля і як перевірити. | Частково автоматично |
| 1.4.1 | Застосування кольору Рівень A · WCAG 2.0 | WCAG 1.4.1: колір не може бути єдиним візуальним способом показати інформацію — посилання, помилки, наявність (рівень A). Посилання, приклади, перевірка. | Частково автоматично |
| 1.4.2 | Аудіокерування Рівень A · WCAG 2.0 | WCAG 1.4.2: звук, що вмикається автоматично довше ніж на 3 секунди, потребує паузи, зупинки чи регулювання гучності (рівень A). Помилки й перевірка. | Частково автоматично |
| 1.4.3 | Контраст (мінімальні вимоги) Рівень AA · WCAG 2.0 | WCAG 1.4.3 вимагає контрастності тексту щонайменше 4,5:1, а великого тексту — 3:1 (рівень AA). Що вважають великим текстом, які є винятки і як це перевірити. | Частково автоматично |
| 1.4.4 | Зміна розміру тексту Рівень AA · WCAG 2.0 | WCAG 1.4.4 вимагає, щоб текст можна було збільшити до 200 % без втрати вмісту чи функцій (рівень AA). Чому блокувати масштаб не можна, винятки та перевірка. | Частково автоматично |
| 1.4.5 | Зображення тексту Рівень AA · WCAG 2.0 | WCAG 1.4.5 вимагає справжній текст замість картинок із текстом, де це можливо (рівень AA). Винятки для логотипів і необхідного тексту, приклади, перевірка. | Ручна перевірка |
| 1.4.10 | Прокрутка в кількох напрямках Рівень AA · WCAG 2.1 | WCAG 1.4.10 вимагає, щоб сторінки працювали при ширині 320 CSS px або масштабі 400 % без горизонтальної прокрутки (рівень AA). Винятки, перевірка й виправлення. | Ручна перевірка |
| 1.4.11 | Контраст нетекстових елементів Рівень AA · WCAG 2.1 | WCAG 1.4.11 вимагає контрастність 3:1 для іконок, рамок полів форми, індикаторів фокуса й частин діаграм (рівень AA). Винятки, як перевірити і виправити. | Ручна перевірка |
| 1.4.12 | Міжрядковий інтервал Рівень AA · WCAG 2.1 | WCAG 1.4.12: текст має працювати, коли користувач задає висоту рядка 1,5, абзаци 2×, інтервали між літерами 0,12 і словами 0,16 (рівень AA). Як перевірити. | Частково автоматично |
| 1.4.13 | Вміст під час наведення курсора чи встановлення фокуса Рівень AA · WCAG 2.1 | WCAG 1.4.13: підказки, мегаменю та спливні вікна при наведенні чи фокусі має бути змога закрити, навести на них курсор, і вони не зникають самі (рівень AA). | Ручна перевірка |
2. Керованість
| № | Критерій успішності | Що перевірити | Перевірка |
|---|---|---|---|
| 2.1.1 | Клавіатура Рівень A · WCAG 2.0 | WCAG 2.1.1 вимагає, щоб кожна функція сторінки працювала лише з клавіатури (рівень A). Що це охоплює, єдиний виняток і як перевірити навігацію з клавіатури. | Частково автоматично |
| 2.1.2 | Повне керування з клавіатури Рівень A · WCAG 2.0 | WCAG 2.1.2: фокус клавіатури, що потрапив у компонент, має могти покинути його лише за допомогою клавіатури (рівень A). Типові клавіатурні пастки й перевірка. | Ручна перевірка |
| 2.1.4 | Клавіші для швидких дій Рівень A · WCAG 2.1 | WCAG 2.1.4: односимвольні клавіатурні скорочення має бути змога вимкнути, перепризначити чи обмежити елементом у фокусі (рівень A). Приклади й перевірка. | Ручна перевірка |
| 2.2.1 | Налаштування часу Рівень A · WCAG 2.0 | WCAG 2.2.1 вимагає, щоб ліміти часу можна було вимкнути, змінити чи продовжити, з попередженням і 20 секундами на продовження (рівень A). Винятки та перевірка. | Частково автоматично |
| 2.2.2 | Пауза, Зупинення, Приховування Рівень A · WCAG 2.0 | WCAG 2.2.2 вимагає спосіб поставити на паузу, зупинити чи приховати вміст, що рухається понад 5 секунд або оновлюється сам (рівень A). Каруселі, бігучі рядки. | Частково автоматично |
| 2.3.1 | Обмеження на три чи менше спалахи Рівень A · WCAG 2.0 | WCAG 2.3.1 забороняє вміст, що спалахує понад три рази за будь-яку секунду, якщо він не нижчий за пороги спалахів (рівень A). Що враховують і як перевірити. | Ручна перевірка |
| 2.4.1 | Пропускання блоків Рівень A · WCAG 2.0 | WCAG 2.4.1 вимагає спосіб пропустити блоки, що повторюються на кожній сторінці, як-от меню (рівень A). Посилання пропуску, орієнтири, заголовки, перевірка. | Частково автоматично |
| 2.4.2 | Заголовок сторінки Рівень A · WCAG 2.0 | WCAG 2.4.2 вимагає, щоб кожна вебсторінка мала заголовок, що описує її тему чи призначення (рівень A). Добрі заголовки для магазинів і SPA, як перевірити. | Частково автоматично |
| 2.4.3 | Порядок переміщення фокуса Рівень A · WCAG 2.0 | WCAG 2.4.3 вимагає, щоб фокус клавіатури рухався в порядку, який зберігає зміст і працездатність (рівень A). Додатний tabindex, спливні вікна та перевірка. | Ручна перевірка |
| 2.4.4 | Призначення посилання (в контексті) Рівень A · WCAG 2.0 | WCAG 2.4.4 вимагає, щоб призначення кожного посилання було зрозумілим з його тексту чи контексту (рівень A). Чому «Детальніше» та порожні іконки — проблема. | Частково автоматично |
| 2.4.5 | Різні способи пошуку Рівень AA · WCAG 2.0 | WCAG 2.4.5 вимагає більше ніж один спосіб знайти сторінку, як-от меню і пошук або мапу сайту (рівень AA). Виняток для оформлення замовлення та перевірка. | Ручна перевірка |
| 2.4.6 | Заголовки та маркування Рівень AA · WCAG 2.0 | WCAG 2.4.6 вимагає, щоб заголовки й мітки описували свою тему чи призначення (рівень AA). Чого критерій не вимагає, порядок заголовків, мітки полів і перевірка. | Ручна перевірка |
| 2.4.7 | Видимий фокус Рівень AA · WCAG 2.0 | WCAG 2.4.7 вимагає, щоб фокус клавіатури завжди було видно (рівень AA). Чому outline: none його ламає, чим критерій відрізняється від 2.4.13 і як перевірити. | Ручна перевірка |
| 2.5.1 | Керування жестами Рівень A · WCAG 2.1 | WCAG 2.5.1 вимагає, щоб зведення пальців, свайп та інші багатоточкові чи траєкторні жести працювали й одним дотиком чи кліком (рівень A). Приклади, перевірка. | Ручна перевірка |
| 2.5.2 | Скасування дій курсором Рівень A · WCAG 2.1 | WCAG 2.5.2 вимагає, щоб дії вказівником не спрацьовували при натисканні, тож випадкові дотики можна скасувати (рівень A). Чотири варіанти виконання й перевірка. | Ручна перевірка |
| 2.5.3 | Маркування в назві елемента Рівень A · WCAG 2.1 | WCAG 2.5.3 вимагає, щоб доступна назва елемента керування містила текст його видимої мітки (рівень A), тож голосом можна назвати те, що бачите. Типові помилки. | Частково автоматично |
| 2.5.4 | Керування рухом Рівень A · WCAG 2.1 | WCAG 2.5.4: функції, які запускає струшування чи нахил пристрою, мають працювати й з елементів керування на екрані, а реакцію на рух можна вимкнути (рівень A). | Ручна перевірка |
3. Зрозумілість
| № | Критерій успішності | Що перевірити | Перевірка |
|---|---|---|---|
| 3.1.1 | Мова сторінки Рівень A · WCAG 2.0 | WCAG 3.1.1 вимагає, щоб основну мову кожної сторінки могли визначити програми, зазвичай через атрибут lang в html (рівень A). Що це означає і як перевірити. | Частково автоматично |
| 3.1.2 | Мова частин вмісту Рівень AA · WCAG 2.0 | WCAG 3.1.2 вимагає позначати уривки іншою мовою атрибутом lang (рівень AA). Винятки для назв і термінів, типові помилки в магазинах і як їх виправити. | Частково автоматично |
| 3.2.1 | Перебування у фокусі Рівень A · WCAG 2.0 | WCAG 3.2.1: перехід фокуса на елемент керування не повинен змінювати контекст, як-от відкривати вікно чи нову сторінку (рівень A). Приклади й перевірка. | Ручна перевірка |
| 3.2.2 | Під час введення Рівень A · WCAG 2.0 | WCAG 3.2.2: зміна поля, прапорця чи списку не повинна змінювати контекст, якщо користувача не попередили заздалегідь (рівень A). Помилки й перевірка. | Ручна перевірка |
| 3.2.3 | Узгоджена навігація Рівень AA · WCAG 2.0 | WCAG 3.2.3 вимагає, щоб меню та інша навігація, що повторюється на сторінках, зберігали той самий відносний порядок (рівень AA). Що дозволено й перевірка. | Ручна перевірка |
| 3.2.4 | Узгоджене розпізнавання Рівень AA · WCAG 2.0 | WCAG 3.2.4 вимагає, щоб компоненти з однаковою функцією мали однакові позначення на всьому сайті (рівень AA). Що враховують, типові помилки й перевірка. | Ручна перевірка |
| 3.3.1 | Виявлення помилок Рівень A · WCAG 2.0 | WCAG 3.3.1 вимагає, щоб помилки у формах позначалися й описувалися текстом, зокрема порожні обов'язкові поля (рівень A). Типові помилки, перевірка. | Ручна перевірка |
| 3.3.2 | Маркування або інструкції Рівень A · WCAG 2.0 | WCAG 3.3.2 вимагає мітки чи інструкції скрізь, де форма чекає введення, включно з необов'язковими полями (рівень A). Заповнювачі, обов'язкові поля, перевірка. | Частково автоматично |
| 3.3.3 | Підказування в разі помилок Рівень AA · WCAG 2.0 | WCAG 3.3.3 вимагає, щоб у разі помилки у формі, коли виправлення відоме, його пропонували користувачеві (рівень AA). Виняток для безпеки, приклади й перевірка. | Ручна перевірка |
| 3.3.4 | Недопущення помилок (юридичних, фінансових, під час уведення даних) Рівень AA · WCAG 2.0 | WCAG 3.3.4 вимагає, щоб замовлення, оплати й видалення даних можна було скасувати, перевірити чи підтвердити, перш ніж вони стануть остаточними (рівень AA). | Ручна перевірка |
4. Надійність
| № | Критерій успішності | Що перевірити | Перевірка |
|---|---|---|---|
| 4.1.2 | Назва, роль, значення Рівень A · WCAG 2.0 | WCAG 4.1.2 вимагає, щоб кожна кнопка, посилання й поле форми передавали допоміжним технологіям назву, роль і стан (рівень A). Помилки ARIA в магазинах. | Частково автоматично |
| 4.1.3 | Повідомлення про статус Рівень AA · WCAG 2.1 | WCAG 4.1.3 вимагає, щоб повідомлення на кшталт «Додано в кошик» чи «12 результатів» озвучувалися без переміщення фокуса (рівень AA). role=status і alert. | Ручна перевірка |
Автоматична перевірка, не повний аудит. Не є юридичною консультацією.
Завантажте чекліст у PDF
Усі критерії успішності рівнів A і AA: що перевірити, з квадратиком для позначки. Безкоштовно, посилання на пошту.