Техніка · Web Content Accessibility Guidelines · W3C
WCAG — що це і скільки їх потрібно
WCAG (Web Content Accessibility Guidelines) — стандарт W3C, що описує, як вебконтент має бути доступним. Версія 2.1 (2018) сьогодні є основою права в Союзі; версія 2.2 (жовтень 2023) додає дев'ять критеріїв і є розумною метою для нових сайтів. Закон не називає WCAG — він доходить до них через норму EN 301 549. Ця сторінка пояснює структуру, рівні й ті критерії, які на практиці вирішують результат аудиту.
Чотири принципи — ті самі, що в законі
1. Сприйнятний (Perceivable)
Контент можна сприйняти принаймні одним чуттям: текстові альтернативи, субтитри, структура, незалежна від вигляду, контраст, збільшення.
2. Функціональний (Operable)
Інтерфейсом можна керувати: клавіатура, час, відсутність блимання, навігація, видимий фокус, цілі дотику.
3. Зрозумілий (Understandable)
Контент і керування зрозумілі: мова, передбачуваність, допомога при помилках.
4. Надійний (Robust) — у законі «сумісний»
Код працює з допоміжними технологіями: правильні назви, ролі, стани.
Під принципами — 13 настанов, під ними 78 (2.1) або 87 (2.2) критеріїв успіху, кожен на рівні A, AA або AAA. Критерій перевірюваний: або сторінка йому відповідає, або ні.
Рівні A, AA, AAA
| Рівень | Що означає | Скільки критеріїв (2.1 / 2.2) | Хто вимагає |
|---|---|---|---|
| A | мінімум — без нього частина користувачів не може користуватися сайтом узагалі | 30 / 32 | завжди разом з AA |
| AA | правовий стандарт — усуває істотні бар'єри для більшості груп | 20 / 24 | закон 2019 р. (державний сектор), EN 301 549, практика під новим законом, ADA/Section 508 у США, BFSG у Німеччині |
| AAA | найвищий — контраст 7:1, жестова мова, розширена аудіодескрипція, без обмежень часу, рівень читання | 28 / 31 | ніхто повністю; вибрані критерії варто виконувати (напр. 2.4.8 місцезнаходження, 1.4.6 контраст) |
«Відповідність AA» означає виконання усіх критеріїв A та AA на кожній сторінці процесу — а якщо процес (напр. купівля) складається з кількох сторінок, усі мають відповідати, інакше не відповідає жодна (вимога відповідності «повні процеси»). Немає «відповідності на 90 %». Є відповідність або перелік невідповідностей.
Як WCAG входять до закону: EN 301 549
EN 301 549 «Вимоги доступності для продуктів і послуг ІКТ» — європейська норма ETSI/CEN/CENELEC. Її розділ 9 («Web») переписує критерії WCAG 2.1 рівнів A та AA як вимоги 9.1.1.1–9.4.1.3; розділ 10 застосовує їх до документів, розділ 11 — до програмного забезпечення й застосунків, розділ 12 — до документації та підтримки. Версію V3.2.1 (2021‑03) зазначено в Офіційному віснику ЄС як гармонізовану норму за директивою 2016/2102 (державний сектор). Під EAA Комісія доручила оновлення (мандат M/587); ETSI опублікувала нову версію, але її зазначення в Офіційному віснику під EAA ще не відбулося. Наслідок: презумпція відповідності зі ст. 20 ч. 1 польського закону формально ще не діє, але єдине практичне мірило, яким скористається орган, — це EN 301 549, тобто WCAG 2.1 AA. Хто відповідає 2.2 AA, відповідає 2.1 AA (2.2 є надмножиною, за винятком вилученого 4.1.1).
Сам стандарт — хто його видає, що в розділах 4–13, чому розділ 9 — це просто WCAG і як послатися на нього в документації — має власну сторінку: EN 301 549.
Що нового у WCAG 2.2
| Критерій | Рівень | Одним реченням |
|---|---|---|
| 2.4.11 Фокус не затулений (мінімум) | AA | Елемент із фокусом не може бути повністю схований під липким заголовком або cookie‑банером. |
| 2.4.12 Фокус не затулений (розширений) | AAA | …ані частково. |
| 2.4.13 Вигляд фокуса | AAA | Індикатор фокуса має щонайменше 2 px обводки і контраст 3:1. |
| 2.5.7 Рухи перетягування | AA | Усе, що робиться перетягуванням (слайдер, сортування), можна зробити і кліками. |
| 2.5.8 Розмір цілі (мінімум) | AA | Ціль дотику має щонайменше 24×24 px CSS або належний відступ від сусідів. |
| 3.2.6 Послідовна допомога | A | Контакт, чат, FAQ — в одному місці на кожній сторінці. |
| 3.3.7 Повторне введення | A | Не змушуйте вводити двічі ті самі дані в одному процесі (адреса доставки = адреса рахунку: один клік). |
| 3.3.8 Доступна автентифікація (мінімум) | AA | Вхід без когнітивних тестів: без переписування кодів із зображення, з можливістю вставити пароль і використати менеджер паролів. |
| 3.3.9 Доступна автентифікація (розширена) | AAA | …без жодних винятків (навіть розпізнавання об'єктів). |
| 4.1.1 Синтаксичний аналіз | — | вилучено — браузери самі виправляють помилки синтаксису; дублікати id далі порушують 4.1.2 і 1.3.1. |
Три з них (2.5.8, 3.3.7, 3.3.8) безпосередньо стосуються магазинів і входу — тому для електронної торгівлі 2.2 є кращою метою за 2.1, навіть якщо право сьогодні відсилає до 2.1.
Критерії, що порушуються найчастіше
Аудити й наша перевірка показують, що десяток‑півтора критеріїв відповідає за більшість невідповідностей. Кожен має правило у звіті.
1.1.1 Нетекстовий контент (A) — зображення без альтернативи
Кожне зображення, що несе інформацію, має alt, який описує цю інформацію; декоративне — alt=""; іконка‑кнопка має назву. Найчастіші помилки: відсутній атрибут, назва файлу в alt, «зображення», «фото», alt на декорі, CAPTCHA без альтернативи. Перевірка: правила img-alt, img-alt-filename.
1.3.1 Інформація та зв'язки (A) — структура лише візуальна
Заголовки як жирний текст, таблиці як div, списки як абзаци з тире, підписи полів не пов'язані з полем. Програма читання бачить плаский текст. Перевірка: heading-order, form-label, table-headers, dup-id.
1.4.3 Контраст (мінімум) (AA) — 4,5:1
Звичайний текст 4,5:1, великий (≥ 24 px або ≥ 19 px жирний) 3:1. Світло‑сірі підписи, білий текст на світлому фото, placeholder'и, посилання, що відрізняються лише кольором. Перевірка вимірює реальний контраст після накладання тла у браузері: contrast-text.
1.4.4 Зміна розміру тексту (AA) і 1.4.10 Перекомпонування (AA)
Сайт працює при 200 % збільшенні та ширині 320 px без прокручування у двох напрямках. Таблиці даних — виняток, якщо прокручуються у власному контейнері. Перевірка рендерить сторінку при 390 і 320 px: reflow-320, mobile-overflow, doc-zoom (заборона user-scalable=no).
1.4.11 Контраст нетекстових елементів (AA) — 3:1
Рамки полів, іконки, індикатори стану, графіки. Світло‑сіра рамка поля форми на білому тлі — типові 1,5:1.
2.1.1 Клавіатура (A) і 2.1.2 Без пастки (A)
Усе можна обслужити клавіатурою; ні з чого не можна «не вийти». Меню на наведення, div onclick, модальні вікна без закриття Esc, вбудовані плеєри. Перевірка: aria-presentation-interactive, focusable-hidden, tabindex-positive.
2.2.2 Пауза, зупинка, приховування (A) і 2.3.1 Блимання (A)
Каруселі, рядки, що біжать, анімовані тла без кнопки паузи; ніщо не блимає частіше ніж 3 рази на секунду. Перевірка: media-autoplay, marquee-blink, motion-reduced (відсутність підтримки prefers-reduced-motion).
2.4.1 Пропуск блоків (A), 2.4.2 Заголовок сторінки (A), 2.4.6 Заголовки й підписи (AA)
Посилання «перейти до вмісту», унікальний заголовок, заголовки, що описують розділи, один h1. Перевірка: skip-link, landmark-main, doc-title, heading-h1, heading-empty.
2.4.4 Мета посилання (A)
«Читати далі» ×12, «тут», «натисніть». Назва посилання має казати, куди воно веде — у контексті речення або сама. Перевірка: link-name, link-generic.
2.4.7 Видимий фокус (AA)
outline: none без заміни. Один рядок CSS, який вимикає сайт для користувача клавіатури. Перевірка переглядає таблиці стилів: focus-outline-suppressed.
2.5.8 Розмір цілі (AA, 2.2)
Кнопки й посилання менші за 24×24 px без відступу: іконки соцмереж, пагінація, ± у кошику. Перевірка вимірює кожну ціль: target-size.
3.1.1 Мова сторінки (A)
<html lang> — без нього синтезатор читає українську по‑англійськи. Перевірка: doc-lang.
3.3.1 Ідентифікація помилки (A), 3.3.2 Підписи або інструкції (A)
Помилка позначена лише червоною рамкою; placeholder замість підпису; обов'язкові поля без позначення. Перевірка: form-label, form-placeholder-only.
4.1.2 Назва, роль, значення (A)
Власні компоненти (select, tabs, акордеон, modal) без ролі й стану; кнопки без назви; ARIA, що посилається на неіснуючі id. Перевірка: button-name, aria-role-invalid, aria-ref-broken, aria-hidden-focusable. Про ARIA.
1.2.2 Субтитри (A) і 1.2.5 Аудіодескрипція (AA)
Відео зі звуком має субтитри (не автоматичні з YouTube без коригування); відео з істотним візуальним шаром має аудіодескрипцію або текстову альтернативу. Перевірка: video-captions.
Як читати результат аудиту
Добрий звіт подає для кожної невідповідності: критерій (напр. 1.4.3), рівень, розташування (селектор або знімок), масштаб (скільки випадків) і спосіб виправлення. Невідповідності не додаються лінійно: одна кнопка «Сплатити» без назви гірша за сто декоративних зображень із порожнім alt. Наш звіт упорядковує їх за вагою (критичні → серйозні → помірні → незначні) і окремо показує, що працює і чого не перевірено — бо «не перевірено» — не «виконано». Автомат виявляє 30–50 % критеріїв; решту (сенс альтернатив, логіку заголовків, зрозумілість повідомлень, роботу з програмою читання) перевіряє людина. Перевірка всього сайту з інструкцією виправлення — це те, що ми даємо замість людини на старті; ручний аудит — наприкінці.
Інструменти для власних тестів
- Клавіатура: відкладіть мишу і пройдіть покупку клавішею Tab. Найдешевший тест у світі.
- Програма читання з екрана: NVDA (Windows, безкоштовно), VoiceOver (macOS/iOS, вбудовано), TalkBack (Android).
- Збільшення: Ctrl + до 200 %, потім звуження вікна до 320 px.
- Контраст: інструменти розробника у браузері показують співвідношення біля кожного кольору тексту.
- Темний режим і високий контраст: налаштування системи; перевірте, чи сайт реагує.
- Автомати: наша перевірка у справжньому браузері, до того axe, Lighthouse, WAVE для другої думки.