WCAG 2.1 vs 2.2: що нового в 9 критеріях
WCAG 2.2 опубліковано W3C у жовтні 2023 року як офіційна еволюція WCAG 2.1. Усі попередні критерії залишилися, плюс додано 9 нових. Якщо ви відповідаєте WCAG 2.1 AA, до WCAG 2.2 AA вам залишилося закрити 6 критеріїв (2 на A + 4 на AA). Розбираємо кожен з прикладами.
Рівень A — обов'язкові базові вимоги
2.4.11 · Focus Not Obscured (Minimum)
Коли елемент отримує focus з клавіатури, він не повинен бути повністю прихований іншими елементами (sticky header, cookie banner, чат-віджет).
Як це виглядає у реальному житті: користувач Tab-ом доходить до інпута, але цей інпут перекритий sticky-баром унизу екрана. Він не бачить, що зараз focused.
Як виправити: при focus прокручуйте сторінку так, щоб елемент був видимий, або переробіть sticky-елементи, що блокують контент. Використовуйте scroll-margin-top у CSS.
3.2.6 · Consistent Help
Якщо на сайті є «допомога» (контакт, форма зворотного зв'язку, FAQ-посилання, чат) — ці елементи повинні бути в однаковому місці на всіх сторінках. Не міняйте позицію посилання «Контакти» між головною і checkout.
Рівень AA — професійний стандарт
2.4.12 · Focus Not Obscured (Enhanced) — AA-варіант
Те саме, що 2.4.11, але жодна частина focused-елемента не може бути перекрита. Не лише видимий — повністю розкритий.
2.5.7 · Dragging Movements
Будь-яка функціональність, що використовує drag (перетягування), має мати альтернативу. Наприклад, в інтерфейсі kanban-дошки, де картки переміщуються drag-and-drop, мусить бути меню «Перемістити в...» з кнопкою.
Причина: користувачі з тремором, обмеженою моторикою або ті, хто використовує switch-control, не можуть виконати drag-жест.
2.5.8 · Target Size (Minimum)
Tap-target (кнопка, посилання, інтерактивний елемент) має бути щонайменше 24×24 пікселів. Виняток — inline-посилання у тексті.
Реалізація: переконайтеся, що CSS не робить кнопки меншими через padding: 0 або font-size: 12px. Для іконкових кнопок — це найкритичніше: завжди передбачте min-width: 44px; min-height: 44px (рекомендація WCAG, ще більший комфорт).
3.3.8 · Accessible Authentication (Minimum)
Логін/реєстрація не повинні вимагати когнітивних завдань (запам'ятати випадковий пароль, розв'язати капчу зображення, ввести код по пам'яті).
Дозволено:
- Password manager (autofill)
- Magic link через email
- WebAuthn / passkeys
- OAuth через Google/Apple/Facebook
- SMS-OTP (якщо немає інших опцій)
Капчі через зображення — заборонені на AA. Замініть на reCAPTCHA v3 (невидима поведінкова) або hCaptcha з accessibility-режимом.
3.3.9 · Redundant Entry
Якщо інформація вже введена в одному кроці процесу, не змушуйте користувача вводити її повторно. Приклад: під час checkout користувач ввів адресу доставки. Потім система запитує «Адреса для рахунку?» — потрібен чекбокс «Така сама» або pre-filled поля.
Винятки: пароль, фінансова інформація з міркувань безпеки.
Рівень AAA — для організацій з найвищими вимогами
2.4.13 · Focus Appearance
Focus-індикатор повинен бути візуально контрастним і помітним: товщина обрамлення ≥ 2 пікселі, контраст з фоном ≥ 3:1.
2.5.7 · Target Size (Enhanced)
44×44 пікселів для всіх tap-target — без винятків. Чітка рекомендація Apple HIG, Material Design і WCAG AAA.
3.3.7 · Accessible Authentication (Enhanced)
Те саме, що AA-варіант, але навіть SMS-OTP заборонений. Тільки password manager / passkeys / OAuth.
Що це означає для вас
Якщо ваш сайт зараз відповідає WCAG 2.1 AA і ви хочете перейти на WCAG 2.2 AA, фокусуйтесь на цих 6 критеріях:
- Перевірити, що sticky header не перекриває focus
- Зробити drag-and-drop опціональним
- Збільшити tap-target ≥ 24×24
- Прибрати капчі-зображення, перейти на password manager / OAuth
- Pre-fill повторювані поля у мульти-крокових формах
- Однакове розташування «Допомоги» між сторінками
Усі 6 — реалістично закрити за 1–2 sprint командою з 2–3 розробників.
Що далі
- WCAG 2.2 чек-ліст за 30 днів
- Внутрішній a11y-аудит командою
- Безкоштовна перевірка сайту — /scan