Чек-лист WCAG 2.2 AA для інтернет-магазину
Оновлено 12 жовтня 2026 · 4 хв читання
Чек-лист WCAG 2.2 AA для інтернет-магазину — це перелік перевірок, які покривають найчастіші бар'єри: контраст, альтернативний текст, підписи форм, назви кнопок, роботу з клавіатурою, видимий фокус і розмір цілей для натискання. Для кожного пункту нижче вказано, чи знаходить його автоматична перевірка. Автоматика корисна, але вона не повний аудит: частину пунктів можна перевірити лише вручну.
Перевіряйте насамперед шлях покупця: головна → пошук → категорія → картка товару → кошик → оформлення замовлення → оплата.
Як читати чек-лист WCAG 2.2
- Авто — автоматична перевірка зазвичай знаходить проблему.
- Частково — автоматика знаходить частину випадків, решту треба дивитися вручну.
- Вручну — автоматика цього не перевірить.
1. Текст і кольори
| Перевірка | Критерій WCAG | Автоматика |
|---|---|---|
| Контраст звичайного тексту не менше 4.5:1, великого — 3:1 | 1.4.3 | авто (крім тексту на зображеннях і градієнтах) |
| Контраст іконок, меж полів, стану кнопок не менше 3:1 | 1.4.11 | частково |
| Інформація не передається лише кольором (наприклад, «поля з помилкою червоні») | 1.4.1 | вручну |
| Текст можна збільшити до 200% без втрати вмісту | 1.4.4 | вручну |
| На ширині 320 CSS-пікселів немає горизонтальної прокрутки | 1.4.10 | вручну |
2. Зображення і медіа
| Перевірка | Критерій | Автоматика |
|---|---|---|
| Фото товарів мають альтернативний текст | 1.1.1 | авто (наявність) |
| Alt описує те, що важливо покупцю: модель, колір, деталь | 1.1.1 | вручну |
| Декоративні зображення мають порожній alt | 1.1.1 | частково |
| Відео мають субтитри | 1.2.2 | вручну |
| Автоматичні каруселі й анімацію можна зупинити | 2.2.2 | вручну |
3. Форми: кошик, реєстрація, оформлення замовлення
| Перевірка | Критерій | Автоматика |
|---|---|---|
| Кожне поле має видимий підпис, пов'язаний із полем | 1.3.1, 3.3.2, 4.1.2 | авто (зв'язок підпису) |
Поля адреси й контактів мають autocomplete |
1.3.5 | частково |
| Помилки описано текстом і вказано, як виправити | 3.3.1, 3.3.3 | вручну |
| Не треба повторно вводити дані, які покупець уже вказав (наприклад, адресу доставки для оплати) | 3.3.7 (новий у 2.2) | вручну |
| Вхід не вимагає розв'язувати головоломку чи запам'ятовувати; дозволено вставку пароля і менеджери паролів | 3.3.8 (новий у 2.2) | вручну |
4. Кнопки і посилання
| Перевірка | Критерій | Автоматика |
|---|---|---|
| Кнопки-іконки (кошик, пошук, «закрити») мають доступну назву | 4.1.2 | авто |
| Посилання зрозумілі з тексту або контексту, без безлічі «Детальніше» | 2.4.4 | частково |
Кнопки зроблено елементом button, а не div |
4.1.2 | частково |
| Ціль для натискання не менше 24×24 CSS-пікселі або має достатній відступ | 2.5.8 (новий у 2.2) | частково |
| Дії, що вимагають перетягування (повзунок ціни), мають альтернативу одним натисканням | 2.5.7 (новий у 2.2) | вручну |
5. Клавіатура і фокус
| Перевірка | Критерій | Автоматика |
|---|---|---|
| Увесь шлях покупки можна пройти лише клавіатурою | 2.1.1 | вручну |
| Немає пасток: з меню, фільтрів і модальних вікон можна вийти (Esc, Tab) | 2.1.2 | вручну |
| Порядок фокуса логічний | 2.4.3 | вручну |
| Фокус видно на кожному елементі | 2.4.7 | вручну |
| Фокус не ховається повністю під липкою шапкою, банером cookie чи чатом | 2.4.11 (новий у 2.2) | вручну |
| Є посилання «Перейти до основного вмісту» | 2.4.1 | частково |
6. Структура і зміст
| Перевірка | Критерій | Автоматика |
|---|---|---|
Мова сторінки вказана в lang |
3.1.1 | авто |
Кожна сторінка має зрозумілий заголовок title |
2.4.2 | частково |
| Заголовки утворюють логічну структуру | 1.3.1, 2.4.6 | частково |
| Таблиці розмірів мають заголовки стовпців | 1.3.1 | частково |
| Допомога (чат, контакти) розміщена в одному й тому самому місці на всіх сторінках | 3.2.6 (новий у 2.2) | вручну |
| ARIA-атрибути використано правильно | 4.1.2 | авто |
Що змінилося у WCAG 2.2
WCAG 2.2 додала до рівнів A і AA шість критеріїв, які ви бачите в таблицях вище: 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 і 3.3.8. Критерій 4.1.1 «Парсинг» у WCAG 2.2 вважається застарілим. Детальніше — у статті WCAG 2.2: що змінилося для інтернет-магазинів.
Європейська норма EN 301 549 V4.1.1, що базується на WCAG 2.2, опублікована у вересні 2026 року; її публікацію в Офіційному віснику ЄС очікують наприкінці 2026 року. До того гармонізованою залишається V3.2.1 на основі WCAG 2.1. Ми перевіряємо за WCAG 2.2 AA.
Як використовувати чек-лист
- Запустіть автоматичну перевірку — почніть з безкоштовної перевірки однієї сторінки. Вона закриє пункти з позначкою «авто».
- Пройдіть шлях покупця лише клавіатурою і з увімкненим збільшенням 200%.
- Перевірте оформлення замовлення з екранним читачем: NVDA на Windows або VoiceOver на Mac чи iPhone.
- Записуйте знайдене і виправляйте за пріоритетами: спочатку те, що заважає завершити покупку.
- Увімкніть щотижневий моніторинг, щоб оновлення теми не повернули старі помилки (див. як це працює).
Типові помилки конкретних платформ розібрано у статті 10 найчастіших помилок доступності в Shopify і WooCommerce. Пояснення термінів — у глосарії.
Цей чек-лист не є повним переліком критеріїв WCAG 2.2 і не замінює аудиту. Автоматична перевірка — не повний аудит і не юридична консультація.
Джерела
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2: w3.org/TR/WCAG22
- W3C, What's New in WCAG 2.2: w3.org/WAI/standards-guidelines/wcag/new-in-22