Як впровадити WCAG 2.2 за 30 днів: чек-ліст для розробників

Як читати цей план

WCAG 2.2 Level AA — це 50 критеріїв успіху. Для невеликої команди впровадити все одразу нереально. Цей план — практичний 30-денний sprint, що покриває критичні 25 пунктів, які дають 80% результату при 20% зусиль.

Тиждень 1 · Семантика та структура

Понеділок–вівторок:

Перевірте, що в <html> стоїть lang="uk"
Один <h1> на сторінку, наступні рівні без пропусків
Усі сторінки обгорнуті у <header>, <main>, <footer>, <nav>

Середа–п'ятниця:

Кнопки — <button>, посилання — <a>. НЕ <div onclick>
Усі форми мають <label for> або aria-label
Поля required позначені програмно (required атрибут)

Інструменти: axe DevTools (Chrome), WAVE.

Тиждень 2 · Контрастність та візуал

Аудит контрасту: всі тексти ≥ 4.5:1, великі ≥ 3:1
Стани кнопок (hover/focus/active) — мають бути візуально відмінні
Focus-ring видимий і не ховається через outline: none
Zoom 200% — текст не обрізається, контент не тікає

Тиждень 3 · Клавіатура та інтерактив

Усі функції доступні з клавіатури (Tab, Enter, Space, Escape)
Логічний порядок focus (DOM order)
Skip-link «Перейти до контенту» на першому Tab
Модалі: focus trap, Escape закриває, focus повертається
Карусель / акордеон: ARIA-атрибути коректні

Тиждень 4 · Контент і медіа

Усі <img> мають коректний alt (або alt="" для декоративних)
Відео мають субтитри українською
Аудіо — транскрипт
Всі помилки форм описані текстом + aria-describedby
На сайті є <a href="#main"> — skip link

Що далі

30 днів дають вам відповідність базовому набору. Залишається ~25 критеріїв, що потребують глибших змін: специфіка карусель, складні форми, складні таблиці. Це робота на наступний sprint.

Перевіряйте прогрес щотижня через /scan — ви побачите реальний приріст оцінки.

WCAG 2.2 за 30 днів: чек-ліст для розробників