WCAG 2.2 для продуктових команд: шість нових вимог рівнів A і AA та як їх перевірити

WCAG (Web Content Accessibility Guidelines) — стандарт доступності вебконтенту від W3C. Версія 2.2 стала рекомендацією W3C 5 жовтня 2023 року. Вона додала дев'ять нових критеріїв успіху, а один застарілий (4.1.1 Parsing) прибрала. Решта критеріїв версій 2.0 і 2.1 залишилася без змін, тож продукт, що відповідає WCAG 2.2, відповідає й попереднім версіям.

Продукти зазвичай орієнтуються на рівень AA. Серед нових критеріїв два належать до рівня A, чотири — до AA, три — до AAA. Нижче розібрано шість нових критеріїв рівнів A і AA.

2.4.11 Фокус не перекрито (мінімум), AA

Вимога. Коли елемент отримує фокус з клавіатури, він не повинен бути повністю схований контентом, який додав автор сайту. Часткове перекриття допускається.

Типові порушення, які описує W3C: «липкі» шапки й підвали, що закривають сфокусований елемент під час переходу клавішею Tab, банери cookies внизу екрана, відкриті віджети чату.

Як перевірити. Пройдіться сторінкою клавішею Tab з відкритим банером cookies і «липкою» шапкою. Якщо фокус потрапляє на елемент, якого не видно взагалі, критерій порушено. W3C пропонує кілька рішень: зробити банер модальним, додати відступ прокручування (scroll-padding) під висоту «липких» елементів або закривати банер, коли він втрачає фокус.

2.5.7 Перетягування, AA

Вимога. Будь-яку функцію, що виконується перетягуванням, має бути можливо виконати й одним вказівником без перетягування, якщо перетягування не є суттєвим для функції.

Приклади: сортування карток перетягуванням (дошки завдань, списки), повзунки, завантаження файлів перетягуванням. Альтернативою можуть бути кнопки «вгору/вниз», вибір позиції з меню, натискання на точку шкали повзунка, звичайна кнопка вибору файлу.

Як перевірити. Знайдіть усі місця, де щось можна перетягнути, і спробуйте виконати ту саму дію лише кліками чи дотиками.

2.5.8 Розмір цілі (мінімум), AA

Вимога. Ціль для вказівника — кнопка, посилання, перемикач — має бути щонайменше 24×24 CSS-пікселі. Є винятки:

• відступ: менша ціль допустима, якщо коло діаметром 24 CSS-пікселі з центром на ній не перетинає іншу ціль чи коло іншої малої цілі;
• еквівалент: ту саму функцію виконує інший елемент на сторінці, що відповідає критерію;
• у тексті: посилання всередині речення, розмір якого обмежений висотою рядка;
• керує браузер: розмір визначає браузер, і автор його не змінював;
• суттєво: конкретне подання цілі суттєве для інформації або вимагається законом.

Типові проблеми: маленькі іконки «закрити» в модальних вікнах, тісні ряди іконок соцмереж, крихітні кнопки пагінації, хрестики видалення тегів.

Як перевірити. В інструментах розробника браузера подивіться розміри інтерактивних елементів. Для малих цілей перевірте, чи є довкола них достатній відступ.

3.2.6 Послідовна допомога, A

Вимога. Якщо механізм допомоги (контакти, чат, посилання на довідку, автоматизований помічник) повторюється на кількох сторінках, він має з'являтися в тому самому порядку відносно іншого контенту. Критерій не вимагає додавати допомогу, лише розміщувати наявну послідовно.

Як перевірити. Порівняйте розміщення посилань на підтримку й контакти в шапці, підвалі та формах на різних сторінках продукту.

3.3.7 Надлишкове введення, A

Вимога. Інформацію, яку користувач уже ввів або отримав у тому самому процесі, не можна вимагати ввести знову. Вона має бути або заповнена автоматично, або доступна для вибору. Винятки — коли повторне введення суттєве (наприклад, підтвердження пароля), потрібне для безпеки або попереднє значення вже недійсне.

Класичний приклад від W3C: у формі замовлення прапорець «Адреса для рахунку збігається з адресою доставки».

Як перевірити. Пройдіть багатокрокові процеси — реєстрацію, оформлення замовлення, заявку — і перевірте, чи не просить продукт ще раз те саме ім'я, адресу чи email.

3.3.8 Доступна автентифікація (мінімум), AA

Вимога. Жоден крок входу не повинен вимагати «когнітивного тесту» — запам'ятати, переписати чи обчислити щось, — якщо немає альтернативного способу входу або механізму, що допомагає його пройти. Винятки на рівні AA — розпізнавання об'єктів і впізнавання контенту, який користувач сам надав сайту.

За поясненнями W3C, на практиці це означає:

• не блокувати вставлення в поля пароля й коду підтвердження;
• не заважати менеджерам паролів заповнювати поля. Поля мають бути правильно розмічені, а скрипти не повинні блокувати автозаповнення;
• не вимагати окремих символів пароля (наприклад, 1-й, 3-й і 5-й), якщо їх неможливо вставити;
• капчі. Капча з розпізнаванням об'єктів («оберіть усі світлофори») на рівні AA є винятком. Перекручений текст, який треба переписати, арифметичні задачі та логічні головоломки — ні, для них потрібна альтернатива.

Як перевірити. Спробуйте увійти, вставивши пароль і одноразовий код з буфера обміну, а також через менеджер паролів.

Три критерії рівня AAA

Для повноти: 2.4.12 «Фокус не перекрито (розширений)» вимагає, щоб сфокусований елемент був видимий повністю; 2.4.13 «Вигляд фокусу» задає мінімальний розмір і контрастність індикатора фокусу; 3.3.9 «Доступна автентифікація (розширена)» прибирає винятки для розпізнавання об'єктів і особистого контенту.

Чому це варто робити вже зараз

• Ринок ЄС. Європейський акт про доступність (Директива (ЄС) 2019/882) поширюється на приватний і державний сектори. W3C у переліку політик ЄС вказує для неї WCAG 2.2 як відповідний стандарт. Для українських продуктів, що продають споживачам в ЄС, це практичний орієнтир.
• Україна. У Верховній Раді зареєстровано урядовий законопроєкт № 14278 «Про цифрову доступність в Україні». За карткою законопроєкту, його зареєстровано 5 грудня 2025 року, і він перебуває на розгляді комітетів.
• Користувачі. Більшість нових критеріїв — це звичайна зручність. Більші кнопки, видимий фокус, автозаповнення й вставлення пароля спрощують роботу всім, а не лише людям з інвалідністю.

Короткий чекліст

1. Пройти основні сценарії клавіатурою: фокус видно, «липкі» елементи його не закривають.
2. Для кожного перетягування є альтернатива кліком.
3. Інтерактивні цілі — від 24×24 CSS-пікселів або з достатнім відступом.
4. Допомога й контакти розміщені однаково на всіх сторінках.
5. Багатокрокові форми не просять повторно ті самі дані.
6. Вхід працює зі вставленням пароля, кодів і з менеджерами паролів; капча має доступну альтернативу.