WCAG 2.2: що змінилося для інтернет-магазинів
· 5 хв читання
WCAG 2.2 додала дев'ять нових критеріїв успіху, і шість із них стосуються рівнів A і AA, тобто того, що зазвичай вимагають від інтернет-магазинів. Головне для магазинів: кнопки і посилання мають бути достатнього розміру (щонайменше 24×24 CSS-пікселі або з достатнім відступом), фокус не можна ховати під липкими панелями, у кошику й оформленні замовлення не можна змушувати вводити ті самі дані двічі, а вхід в акаунт не має вимагати розв'язування головоломок. Нижче — кожна зміна з прикладами з e-commerce.
WCAG 2.2 і EN 301 549: що зараз обов'язкове
В ЄС доступність вебсайтів за EAA вимірюють за європейським стандартом EN 301 549. Ситуація станом на жовтень 2026 року:
- EN 301 549 V3.2.1 спирається на WCAG 2.1 AA і поки залишається гармонізованою версією.
- EN 301 549 V4.1.1 спирається на WCAG 2.2 AA. Її опубліковано у вересні 2026 року, а посилання в Офіційному віснику ЄС очікують наприкінці 2026 року.
WCAG 2.2 зворотно сумісна з 2.1: сайт, який відповідає 2.2 AA, автоматично відповідає і 2.1 AA (за винятком застарілого критерію 4.1.1, про нього нижче). Тому ми перевіряємо за WCAG 2.2 AA: так магазин готується до нової версії стандарту і нічого не втрачає за старою. Детальніше про сам закон — у путівнику по EAA.
Що змінилося у WCAG 2.2 для інтернет-магазинів: нові критерії A і AA
2.4.11 Фокус не затулено (мінімум), AA
Коли користувач переходить по сторінці клавішею Tab, елемент у фокусі не може бути повністю схований під іншим вмістом. У магазинах типова проблема — липкий заголовок, банер про cookie або кнопка «Чат з підтримкою», під якими зникає активне посилання чи поле.
Що зробити: перевірте сторінку лише клавіатурою; додайте scroll-padding-top, щоб активний елемент не опинявся під липкою шапкою; банер cookie не має перекривати вміст після закриття.
2.5.7 Рухи перетягування, AA
Якщо щось можна зробити лише перетягуванням (повзунок ціни у фільтрі, сортування, слайдер «до / після»), має бути спосіб зробити те саме одиночним натисканням.
Що зробити: до повзунка діапазону ціни додайте поля «від» і «до»; до каруселі — кнопки «назад» і «вперед».
2.5.8 Розмір цілі (мінімум), AA
Зони натискання мають бути щонайменше 24×24 CSS-пікселі або мати навколо себе достатньо вільного місця, щоб коло діаметром 24 пікселі не перетиналося з сусідньою ціллю. Є винятки, наприклад посилання всередині тексту.
У магазинах це найчастіше: дрібні кнопки «+» і «−» біля кількості товару, іконки «видалити з кошика», крапки слайдера, кружечки вибору кольору.
Що зробити: збільште зону натискання через padding або min-width/min-height, навіть якщо іконка залишається маленькою.
3.2.6 Послідовна допомога, A
Якщо на кількох сторінках є спосіб отримати допомогу (телефон, email, чат, сторінка FAQ), він має бути в тому самому відносному місці. Наприклад, посилання «Допомога» завжди в шапці або завжди в підвалі.
Що зробити: не переміщуйте контакти і чат між шаблонами сторінок; особливо перевірте сторінки оформлення замовлення, які часто мають окремий шаблон.
3.3.7 Надлишкове введення, A
Інформацію, яку користувач уже вводив у межах того самого процесу, треба підставити автоматично або дати вибрати. Класичний приклад — адреса доставки і платіжна адреса.
Що зробити: додайте прапорець «Платіжна адреса збігається з адресою доставки»; не просіть удруге email, який уже введено на попередньому кроці.
3.3.8 Доступна автентифікація (мінімум), AA
Для входу не можна вимагати когнітивного тесту: запам'ятати, переписати чи розв'язати щось, якщо немає альтернативи. Вставка пароля з менеджера паролів має працювати, як і вхід через посилання на email або ключ доступу.
Що зробити: не блокуйте вставку в поле пароля і коду; перевірте, як працює ваша CAPTCHA, і чи є в неї доступна альтернатива.
Нові критерії рівня AAA, коротко
- 2.4.12 Фокус не затулено (покращений): фокус не затулено навіть частково.
- 2.4.13 Вигляд фокусу: вимоги до розміру і контрасту індикатора фокусу.
- 3.3.9 Доступна автентифікація (покращена): суворіший варіант 3.3.8.
Рівень AAA зазвичай не вимагають для всього сайту, але 2.4.13 — корисний орієнтир для дизайну видимого фокусу.
4.1.1 «Синтаксичний аналіз» став застарілим
У WCAG 2.2 критерій 4.1.1 (Parsing) визнано застарілим і вилученим: сучасні браузери й допоміжні технології самі обробляють помилки розмітки. Для магазину це означає, що дубльовані атрибути id вже не є окремою вимогою, але вони досі можуть ламати підписи полів і зв'язки ARIA. Тому ці проблеми варто виправляти і далі.
Що з цього знайде автоматична перевірка
| Критерій | Автоматично | Потрібна ручна перевірка |
|---|---|---|
| 2.4.11 Фокус не затулено | ні | так, прохід клавіатурою |
| 2.5.7 Перетягування | ні | так |
| 2.5.8 Розмір цілі | частково | так, для складних випадків |
| 3.2.6 Послідовна допомога | ні | так |
| 3.3.7 Надлишкове введення | ні | так, у кошику й оформленні |
| 3.3.8 Доступна автентифікація | ні | так |
Тобто більшість нових вимог WCAG 2.2 стосуються поведінки інтерфейсу, яку автоматика не бачить. Автоматична перевірка — це не повний аудит і не юридична консультація: вона добре ловить контраст, alt, підписи полів і порожні кнопки, а нові критерії треба доповнювати ручним проходом. Практичний перелік для самоперевірки — у чек-листі WCAG 2.2.
План для магазину на один спринт
- Пройдіть шлях «головна → товар → кошик → оплата» лише клавіатурою. Шукайте схований фокус (2.4.11).
- Знайдіть усі дрібні іконки-кнопки й збільште їхні зони натискання (2.5.8).
- Додайте альтернативу повзункам і каруселям (2.5.7).
- Перевірте, що адреса і email не вводяться двічі (3.3.7).
- Зафіксуйте місце посилання на допомогу в усіх шаблонах (3.2.6).
- Перевірте вхід: вставка пароля, CAPTCHA, вхід за посиланням (3.3.8).
- Запустіть автоматичну перевірку, щоб закрити типові помилки: див. 10 найчастіших помилок у Shopify і WooCommerce.
Чи стосується ваш магазин EAA взагалі, допоможе зрозуміти фільтр із трьох питань.
Відповіді на часті питання
Скільки нових критеріїв у WCAG 2.2? Дев'ять: шість рівнів A і AA та три рівня AAA. Критерій 4.1.1 визнано застарілим.
Чи обов'язкова WCAG 2.2 вже зараз? Гармонізованою поки є EN 301 549 V3.2.1 (WCAG 2.1); V4.1.1 (WCAG 2.2) опубліковано у вересні 2026 року, посилання в Офіційному віснику ЄС очікують наприкінці 2026 року.
Чи знайде автоматика все нове? Ні, більшість нових критеріїв перевіряють вручну.
Перевірте одну сторінку свого магазину безкоштовно і побачте, з чого почати.