Що таке WCAG 2.2 — повний гід українською

WCAG 2.2 (Web Content Accessibility Guidelines) — це міжнародний стандарт доступності вебконтенту, розроблений консорціумом W3C. Він визначає, як зробити вебсайти та застосунки доступними для людей з різними порушеннями здоров'я. WCAG 2.2 є технічною основою для більшості законів про цифрову доступність у світі, включаючи українські вимоги за ДСТУ EN 301 549 та КМУ 757.

Коротка відповідь: WCAG 2.2 складається з 87 критеріїв успіху, організованих за 4 принципами (POUR) і 3 рівнями відповідності (A, AA, AAA). Для більшості юридичних вимог достатньо рівня AA — це 50 критеріїв.

Що таке WCAG?

WCAG — абревіатура від Web Content Accessibility Guidelines. Перша версія вийшла у 1999 році, остання — WCAG 2.2 — опублікована у жовтні 2023 року.

Стандарт розроблений W3C WAI (Web Accessibility Initiative) — підрозділом консорціуму World Wide Web Consortium. Він не має юридичної сили сам по собі, але є технічною основою, на яку посилаються закони в США (ADA, Section 508), Европейському Союзі (EAA, EN 301 549), Великобританії (Equality Act) та Україні (ДСТУ EN 301 549, КМУ 757).

Ключова ідея WCAG: доступність — не про те, щоб зробити "спеціальну версію для інвалідів". Це про те, щоб основний сайт був придатний до використання всіма людьми.

Факт: За даними WebAIM, 96,3% з 1 мільйона перевірених сайтів мають хоча б одну помилку WCAG рівня AA. Середній сайт має 56 помилок.

Чотири принципи WCAG (POUR)

Всі критерії WCAG організовані навколо чотирьох принципів, відомих як POUR:

Perceivable (Сприйнятність)

Інформація та компоненти інтерфейсу мають бути представлені так, щоб їх могли сприйняти всі користувачі.

Приклади критеріїв:

Альтернативні тексти для зображень (alt атрибут)
Субтитри для відео
Контент не залежить виключно від одного сенсорного каналу
Мінімальний контраст тексту 4.5:1

Operable (Керованість)

Компоненти інтерфейсу та навігація мають бути керованими без спеціальних пристроїв.

Приклади критеріїв:

Весь функціонал доступний з клавіатури
Достатній час для виконання дій
Відсутність елементів, що спалахують частіше 3 разів на секунду (ризик епілепсії)
Підказки для навігації (skip-links, заголовки)

Understandable (Зрозумілість)

Інформація та інтерфейс мають бути зрозумілими.

Приклади критеріїв:

Мова сторінки визначена (lang атрибут)
Передбачувана поведінка (фокус не переміщується несподівано)
Допомога при заповненні форм та повідомлення про помилки
Чіткі підписи для полів форм

Robust (Надійність)

Контент має бути достатньо надійним, щоб коректно інтерпретуватись різними технологіями, включаючи допоміжні (assistive technologies).

Приклади критеріїв:

Валідний HTML-код
Коректне використання ARIA атрибутів
Статус повідомлень передається програмно (через ARIA live regions)

Рівні відповідності: A, AA, AAA

WCAG визначає три рівні відповідності:

Рівень	Критеріїв	Значення	Вимога
A	30	Мінімальна доступність	Юридичний мінімум
AA	+20 (всього 50)	Рекомендований стандарт	Обов'язковий за більшістю законів
AAA	+37 (всього 87)	Найвищий рівень	Рекомендований, але не обов'язковий

Рівень A — базові вимоги. Без них сайт недоступний для великих груп людей. Приклади: наявність alt-текстів, можливість зупинити анімацію, відсутність пасток для клавіатури.

Рівень AA — стандарт для більшості законів, включаючи українські. Додає вимоги щодо контрасту, заголовків, навігації, форм. Саме цей рівень вимагають КМУ 757 та EAA.

Рівень AAA — для спеціалізованих сайтів (медичних, освітніх, урядових). Включає найвищі вимоги до контрасту (7:1), мови жестів для відео, когнітивну доступність.

Практична порада: Починайте з рівня AA. Не намагайтесь одразу досягти AAA — це може бути нереалістично для більшості сайтів, і закон цього не вимагає.

Що нового в WCAG 2.2 порівняно з 2.1?

WCAG 2.2 додав 9 нових критеріїв успіху і видалив 1 (4.1.1 Parsing — через зміни у сучасних браузерах):

Нові критерії рівня A:

3.2.6 Consistent Help — допомога (телефон, чат, форма зворотного зв'язку) має бути в одному місці на всіх сторінках

Нові критерії рівня AA:

2.4.11 Focus Not Obscured (Minimum) — фокус клавіатури не повинен бути повністю прихований overlay-елементами (cookie-банери, модальні вікна)
2.4.12 Focus Not Obscured (Enhanced) — посилений варіант: жодна частина фокусованого елемента не прихована (рівень AA)
2.5.7 Dragging Movements — функціонал drag-and-drop має альтернативу без перетягування
2.5.8 Target Size (Minimum) — мінімальний розмір кнопки/посилання 24×24 CSS пікселі
3.2.7 Visible Controls — елементи керування видимі при hover (не лише при фокусі)
3.3.7 Redundant Entry — не вимагати вводити одну й ту саму інформацію двічі
3.3.8 Accessible Authentication (Minimum) — вхід в систему не вимагає когнітивних тестів (CAPTCHA з розпізнаванням)

Видалено:

4.1.1 Parsing — застарів, оскільки сучасні браузери коректно обробляють навіть невалідний HTML

Чому це важливо? Нові критерії особливо стосуються мобільних інтерфейсів (розмір кнопок, drag-and-drop) та когнітивної доступності (повторний ввід, автентифікація). Якщо у вас є мобільний сайт або застосунок — перевірте ці пункти першочергово.

Як WCAG пов'язаний з ДСТУ EN 301 549?

ДСТУ EN 301 549 — це державний стандарт України, прийнятий на основі європейського EN 301 549. Він охоплює не лише вебсайти, а й:

мобільні застосунки
програмне забезпечення (десктопне)
документи (PDF, DOCX)
апаратне забезпечення

Для вебконтенту ДСТУ EN 301 549 посилається безпосередньо на WCAG 2.1 рівня AA (і частково 2.2). Тобто:

Виконати WCAG 2.1 AA = виконати вимоги ДСТУ EN 301 549 для вебсайтів
WCAG 2.2 AA = WCAG 2.1 AA + 9 нових критеріїв

Рекомендація: орієнтуйтесь на WCAG 2.2 AA — це актуальніший стандарт, і він враховує сучасні патерни розробки.

Детальніше: ДСТУ EN 301 549 — вимоги до сайтів в Україні

Як перевірити сайт на WCAG 2.2?

Перевірка відповідності WCAG 2.2 складається з трьох методів:

1. Автоматизоване тестування

Виявляє ~40% помилок. Швидко і безкоштовно.

→ Перевірте сайт на ЦМЦІ — безкоштовно

Інші інструменти: axe DevTools (Chrome extension), WAVE, Lighthouse в Chrome DevTools.

2. Ручне тестування

Навігація лише клавіатурою (Tab, Enter, стрілки, Escape)
Збільшення до 200% — контент не обрізається, горизонтальний скрол відсутній
Вимкнення CSS — чи зрозуміла структура сторінки?
Перевірка кольорів у grayscale — чи зберігається зміст?

3. Тестування зі скрін-рідером

Найважливіший і найважчий метод. Дозволяє виявити помилки, які не фіксують автоматичні інструменти.

NVDA (Windows, безкоштовний) — детальна інструкція: Як тестувати NVDA
VoiceOver (Mac/iOS, вбудований)
TalkBack (Android, вбудований)

Золоте правило: автоматичне тестування — це необхідний, але не достатній мінімум. Завжди доповнюйте ручним тестуванням.

Поширені питання про WCAG (FAQ)

Чи обов'язковий WCAG 2.2 в Україні? WCAG 2.2 не є безпосередньо законом, але є технічною основою для ДСТУ EN 301 549 та вимог КМУ 757. Для державних сайтів дотримання є обов'язковим. Для приватного бізнесу — через EAA та Законопроєкт 14278.

Яка різниця між WCAG 2.1 і 2.2? WCAG 2.2 додає 9 нових критеріїв (розмір кнопок, фокус не прихований, drag-and-drop альтернативи, доступна автентифікація) і видаляє 1 застарілий. Якщо ваш сайт відповідає WCAG 2.1 AA, для переходу на 2.2 AA потрібно перевірити лише ці 9 нових критеріїв.

Що означає рівень AA на практиці? Рівень AA означає, що ваш сайт: має достатній контраст тексту (4.5:1), підтримує навігацію клавіатурою, має правильно підписані форми, не блокує zoom, коректно позначає мову. Це стандарт для більшості комерційних сайтів.

Скільки часу потрібно для досягнення WCAG 2.2 AA? Для нового сайту — закладіть доступність від початку, це практично не додає часу. Для наявного сайту з типовими помилками — від 2 до 8 тижнів розробки залежно від розміру і стану коду.

Що таке WCAG 2.2 — повний гід українською

Що таке WCAG 2.2 — повний гід українською