Як зробити сайт доступним: WCAG 2.2, український закон і чек-лист для бізнесу
Коротко
- → 95.9% сайтів у світі не відповідають базовим стандартам доступності (WCAG). 1.3 мільярда людей (16% населення) мають ту чи іншу форму інвалідності
- → В Україні з 2025 діє Закон «Про цифрову доступність» — державні та комунальні сайти зобов'язані відповідати WCAG 2.1 AA. Бізнес-сайтам рекомендовано, штрафів поки немає
- → Топ проблем: відсутній alt у зображень, низький контраст тексту, форми без label, не працює навігація з клавіатури, відео без субтитрів, CAPTCHA без альтернативи
- → Доступний сайт — це і SEO-бонус: alt-тексти, семантична розмітка, чітка структура заголовків, швидкість — все це покращує і пошукові позиції
Кого стосується доступність і чому це важливо саме зараз
Ветеран повертається з фронту з порушенням зору. Хоче замовити ліки онлайн. Відкриває сайт аптеки — screen reader не може прочитати жодну кнопку, бо розробник не додав alt-текст до іконок. Форма замовлення не працює з клавіатури. Контраст тексту настільки низький, що навіть з частковим зором нічого не видно. Ветеран закриває вкладку. Один із мільйонів користувачів, яких ваш сайт мовчки відштовхує.
За даними WebAIM 2026, 95.9% сайтів у світі не відповідають базовим стандартам доступності. Середня кількість помилок — 56 на одну сторінку. Це не якась абстрактна проблема великих корпорацій — це стосується кожного бізнес-сайту, інтернет-магазину, сервісу запису до лікаря.
«Доступність — це для сліпих» — найпоширеніше хибне уявлення. Насправді це стосується набагато ширшого кола людей: 1.3 мільярда людей у світі живуть з тією чи іншою формою інвалідності — це 16% населення планети. Але доступність потрібна не тільки їм.
Порушення зору — 2.2 мільярда людей, від повної сліпоти до поганого зору без окулярів. Порушення слуху — 430 мільйонів. Моторні порушення — тремор, параліч, ампутація, артрит. Когнітивні — дислексія, ADHD, аутизм. Тимчасові — зламана рука, операція на очах, мігрень. Ситуативні — яскраве сонце на екрані, гучне середовище, одна рука зайнята дитиною.
В Україні після 2022 року ця тема стала критичною: тисячі ветеранів і цивільних із пораненнями потребують доступних цифрових сервісів. І держава це розуміє — законопроєкт вже в Раді.
Закон про цифрову доступність в Україні
У листопаді 2025 Кабмін схвалив законопроєкт №14278 «Про цифрову доступність в Україні». Це не рекомендація — це крок до обов'язкових вимог. Законопроєкт розроблений Мінцифри за підтримки UNDP і базується на стандартах ЄС.
Що вимагає закон
Сайти та додатки повинні розроблятися з урахуванням потреб усіх людей. Технічна основа — ДСТУ EN 301 549:2022, український аналог європейського стандарту, який базується на WCAG 2.2. З липня 2023 (постанова КМУ №757) його дотримання вже обов'язкове для державних сайтів.
Кого стосується
Не тільки державних органів. Вимоги поширяться на приватний бізнес у ключових сферах: банки і фінанси, транспорт, інтернет-магазини, медицина, освіта, зв'язок. Єдиний виняток — малий бізнес. Крім сайтів і додатків, закон охоплює нові банкомати й термінали самообслуговування.
Що це означає для вашого бізнесу
Якщо ви — банк, інтернет-магазин, медичний сервіс або освітня платформа — готуйтесь. Власники сервісів будуть зобов'язані відкрито звітувати про рівень доступності, а за дотриманням стандартів проводитиметься моніторинг. Краще почати зараз, ніж переробляти сайт під тиском.
Європейський і світовий контекст
Україна не діє у вакуумі — законопроєкт є частиною гармонізації з європейськими стандартами. З червня 2025 року в ЄС діє European Accessibility Act (EAA), який поширює вимоги доступності на широкий спектр цифрових сервісів: від банківських додатків до e-commerce. Якщо ваш бізнес працює з клієнтами в ЄС — ви вже зобов'язані.
У США ситуація ще жорсткіша: у 2025 році було подано понад 5 000 позовів за порушення ADA щодо доступності сайтів. Причому 77% позовів стосуються малого бізнесу з доходом менше $20 мільйонів. У квітні 2026 набув чинності дедлайн за Title II ADA для державних органів — WCAG 2.1 Level AA як обов'язковий технічний стандарт.
Тренд однозначний: більше регулювання, більше позовів, більше уваги. Доступність переходить зі статусу «nice to have» у «обов'язково». І Україна слідує цьому тренду.
WCAG 2.2 — що це і як працює
WCAG (Web Content Accessibility Guidelines) — міжнародний стандарт доступності веб-контенту від W3C. Це технічне «як робити», на яке посилаються всі закони. Поточна версія — WCAG 2.2, опублікована у 2023 році. WCAG 3.0 розробляється, але поки не є стандартом для відповідності.
Основа WCAG — чотири принципи POUR:
Perceivable (Сприйнятливість) — інформацію можна побачити, почути або відчути. Alt-текст для зображень, субтитри для відео, достатній контраст тексту.
Operable (Керованість) — інтерфейс працює з клавіатури, без мишки. Достатній час на дії, немає контенту, що спричиняє напади (мерехтіння).
Understandable (Зрозумілість) — текст читабельний, інтерфейс передбачуваний, помилки у формах зрозуміло пояснені.
Robust (Надійність) — контент коректно працює з різними браузерами та допоміжними технологіями (screen readers, збільшувачі).
Рівні відповідності
Level A — абсолютний мінімум. Якщо не дотримані — серйозні бар'єри для користувачів. Level AA — цільовий стандарт для бізнесу і закону. Усуває найпоширеніші бар'єри. Саме цей рівень вимагає ДСТУ EN 301 549 і EAA. Level AAA — найвищий рівень, рідко досягається для всього сайту.
| Критерій | Level A | Level AA | Level AAA |
|---|---|---|---|
| Контраст тексту | — | 4.5:1 (звичайний), 3:1 (великий) | 7:1 (звичайний), 4.5:1 (великий) |
| Клавіатурна навігація | Базова (Tab, Enter) | Без пасток фокусу | Повна без винятків |
| Alt-текст для зображень | Обов'язковий | Обов'язковий | + розширений опис для складних |
| Субтитри для відео | Попередньо записане | + live-трансляції | + жестова мова |
| Законодавча вимога | — | ДСТУ EN 301 549, EAA, ADA | Рекомендовано |
| Для кого | Абсолютний мінімум | Бізнес, держсайти | Спеціалізовані сервіси |
Що нового в WCAG 2.2
Покращена видимість фокусу — елементи при навігації клавіатурою мають бути чітко виділені. Альтернативи для drag-and-drop — кожну дію перетягування можна виконати без мишки. Доступна автентифікація — вхід у систему не повинен залежати від запам'ятовування складних паролів або розпізнавання зображень. Мінімальний розмір інтерактивних елементів — кнопки і посилання не менше 24×24 пікселів.
Топ-6 проблем доступності на реальних сайтах
За даними WebAIM 2026, шість типів помилок спричиняють 96.4% усіх проблем. Якщо виправити тільки їх — сайт стане драматично доступнішим.
1. Недостатній контраст тексту
Зустрічається на 79.1% сайтів — в середньому 29 випадків на сторінку. Світло-сірий текст на білому фоні — класика. WCAG вимагає мінімальний контраст 4.5:1 для звичайного тексту і 3:1 для великого (18px+ bold або 24px+). Це критично впливає і на загальний UX сайту.
2. Відсутній alt-текст для зображень
55.5% сайтів мають зображення без альтернативного тексту. Із них 44% — пов'язані зображення (посилання-іконки), що повністю ламає навігацію для screen reader. Декоративні зображення потребують порожній alt (alt=""), змістовні — опис того, що зображено.
3. Форми без підписів (labels)
35% форм не мають описових підписів. Placeholder — це не label. Screen reader не може пояснити користувачу, що саме потрібно вводити. Кожне поле форми повинно мати <label> з атрибутом for, прив'язаним до id поля.
4. Клавіатурна навігація не працює
Кнопки, посилання, меню — все має працювати через Tab і Enter. Якщо елемент не фокусується або фокус «застряє» в модальному вікні — користувач без мишки заблокований. Ніколи не видаляйте outline з CSS — це те, що показує, де зараз фокус.
5. Порушена ієрархія заголовків
H1 → H2 → H3 — це не просто стиль, це структура сторінки для screen reader. Користувачі з порушенням зору навігують за заголовками, як ви навігуєте очима. Пропуск рівнів (H1 → H3) або кілька H1 на сторінці — помилки, які легко виправити.
6. Посилання без зрозумілого тексту
80% сайтів мають посилання, які незрозумілі поза контекстом. «Детальніше», «тут», «натисніть» — для screen reader це безглуздо. Посилання має описувати, куди воно веде: «Розрахувати вартість сайту» замість «натисніть тут».
Хочете знати що гальмує ваш сайт?
SEO-аудит — знайду технічні проблеми і дам план виправлень
Чек-лист доступності: 15 пунктів для вашого сайту
Цей список покриває WCAG 2.2 Level AA — стандарт, якого вимагає український закон і EAA. Почніть із перших п'яти — вони закривають найбільше проблем.
- Контраст тексту — мінімум 4.5:1 для звичайного, 3:1 для великого тексту. Перевіряйте кожен колір на фоні
- Alt-текст — кожне змістовне зображення має опис. Декоративні —
alt="". Іконки-посилання — alt описує дію, не іконку - Заголовки — один H1 на сторінку, логічна ієрархія H2→H3→H4. Не пропускайте рівні
- Форми — кожне поле має
<label>. Помилки описані текстом, не тільки кольором. Обов'язкові поля позначені текстом, не лише зірочкою - Клавіатурна навігація — Tab проходить усі інтерактивні елементи. Enter і Space активують кнопки. Escape закриває модальні вікна. Фокус видимий
- Skip-link — перший Tab на сторінці пропонує «Перейти до основного контенту» — пропускає header і навігацію
- Мова сторінки — атрибут
lang="uk"на<html>. Якщо є цитати іншою мовою —langна елементі - Responsive і масштабування — сайт працює при збільшенні до 200%. Не блокуйте zoom через
user-scalable=no - Колір не єдиний індикатор — помилки, статуси, обов'язковість — крім червоного кольору, потрібен текст або іконка
- Посилання — зрозумілий текст без контексту. «Читати статтю про SEO» замість «натисніть тут». Посилання виділені не тільки кольором
- Субтитри та транскрипції — відео має субтитри, аудіо — текстову версію
- ARIA правильно — використовуйте ARIA лише коли нативний HTML не вирішує задачу. Неправильний ARIA гірше, ніж відсутній
- Touch targets — кнопки і посилання не менше 24×24 пікселів (WCAG 2.2). На мобільних — бажано 44×44
- Анімація і рух — поважайте
prefers-reduced-motion. Ніякого автовідтворення відео. Ніякого мерехтіння (максимум 3 спалахи/секунду) - Помилки у формах — чітке пояснення, що не так, і як виправити. Не очищуйте форму при помилці — збережіть введені дані
Інструменти перевірки доступності
Автоматичні інструменти знаходять 30-40% проблем. Решту виявляє тільки ручне тестування. Обидва підходи потрібні. Якщо не хочете розбиратися самостійно — замовте аудит сайту, доступність входить у перевірку.
Автоматичні (безкоштовні)
WAVE (wave.webaim.org) — найпопулярніший онлайн-сканер. Показує помилки прямо на сторінці: контраст, alt, заголовки, ARIA. Є розширення для Chrome. Lighthouse — вбудований у Chrome DevTools (вкладка Audits). Дає оцінку доступності з переліком конкретних проблем. axe DevTools — розширення для Chrome. Глибший аналіз, ніж Lighthouse, з поясненнями як виправити кожну помилку. Contrast Checker (WebAIM) — перевірка контрасту двох кольорів за WCAG AA/AAA.
Ручне тестування
Навігація клавіатурою — відкрийте сайт, відкладіть мишку, спробуйте зробити все тільки Tab/Enter/Escape. Якщо десь застрягли — проблема. Screen reader — NVDA (Windows, безкоштовний) або VoiceOver (macOS/iOS, вбудований). Закрийте очі, увімкніть screen reader, спробуйте замовити товар або заповнити форму. Це найкращий тест, який існує.
Регулярний моніторинг
Доступність — не одноразова дія. Кожне оновлення сайту може внести нові бар'єри. Включіть перевірку доступності в технічний аудит сайту — раз на квартал мінімум. WebAIM 2026 показав, що сторінки стають складнішими на 22.5% за рік — більше елементів, більше потенційних помилок.
Вартість доступності і бізнес-кейс
«Доступність — це дорого» — міф. Якщо закладати доступність на етапі розробки — це додає 5-15% до бюджету. Якщо переробляти вже готовий сайт — може коштувати 30-50% від початкової розробки.
Що коштує доступність
Для нового сайту: +5-15% до бюджету розробки — правильна розмітка, контраст, alt-текст, клавіатурна навігація. Це не окрема «фіча» — це правильний код. Для існуючого сайту: аудит доступності (3 000-10 000 грн) + виправлення критичних проблем (5 000-20 000 грн залежно від масштабу). Порахуйте вартість вашого проєкту в калькуляторі.
Що дає доступність бізнесу
Ширша аудиторія — 16% населення з інвалідністю + їхні родини, друзі, колеги. Це мільярди доларів купівельної спроможності. Краще SEO — Google враховує структуру заголовків, alt-текст, швидкість, мобільну адаптацію. Доступний сайт — це SEO-оптимізований сайт. Менше відмов — доступні сайти мають значно нижчий показник відмови, ніж недоступні. Доступність і якісний UX/UI — це дві сторони однієї медалі.
Захист від позовів — у 2025 у США подано понад 5 000 ADA-позовів. Україна рухається в тому ж напрямку. Конкурентна перевага — поки 95.9% сайтів не відповідають стандартам, ваш доступний сайт — вже виняток, який помітять.
Часті запитання
Для державних сайтів — так, з 2023 року (постанова КМУ №757, стандарт ДСТУ EN 301 549:2022). Для приватного бізнесу — законопроєкт №14278 схвалений Кабміном у листопаді 2025 і подається до Верховної Ради. Вимоги стосуватимуться банків, e-commerce, медицини, освіти, транспорту. Малий бізнес — виняток.
Для нового сайту: +5-15% до бюджету розробки. Для існуючого: аудит 3 000-10 000 грн + виправлення 5 000-20 000 грн. Якщо закладати доступність з самого початку — це найдешевший варіант. Переробка готового сайту завжди дорожча.
WCAG 2.2 Level AA — оптимальний вибір. Він включає все з 2.1 плюс нові критерії: покращена видимість фокусу, альтернативи drag-and-drop, доступна автентифікація. Саме на WCAG 2.2 базується ДСТУ EN 301 549:2022. WCAG 3.0 поки розробляється і не є стандартом.
Ні. Overlay-віджети (AccessiBe, UserWay тощо) не замінюють правильну розмітку. Вони можуть додати збільшення шрифту чи контраст, але не виправляють відсутній alt-текст, порушену навігацію або поламані форми. Спільнота людей з інвалідністю активно критикує такі рішення. Справжня доступність — у коді, а не у надбудові.
Три кроки: 1) WAVE (wave.webaim.org) — вставте URL, подивіться звіт. 2) Chrome DevTools → Lighthouse → Accessibility — автоматичний скан з оцінкою. 3) Відкрийте сайт, відкладіть мишку, спробуйте зробити все клавіатурою (Tab, Enter, Escape). Якщо застрягли — є проблема.
Так, безпосередньо. Alt-текст, структура заголовків, семантична розмітка, зрозумілі посилання, мобільна адаптація, швидкість — усе це одночасно і критерії доступності, і фактори ранжування Google. Доступний сайт — це автоматично краще SEO.
Так, якщо ви надаєте цифрові послуги клієнтам із ЄС. EAA діє з червня 2025 і поширюється на e-commerce, банківські сервіси, медіа та транспорт. Якщо ваш сайт доступний європейським користувачам — ви підпадаєте під ці вимоги.
Не знайшли відповідь?
Висновок: доступність — це не чек-бокс, а базова повага
Можна думати про доступність як про compliance, закон, штрафи. А можна — як про базову повагу до кожної людини, яка відкриває ваш сайт. Ветеран, бабуся, людина з тимчасовою травмою, мама з дитиною на руках — вони всі заслуговують на сайт, який працює.
Почніть із малого: перевірте контраст, додайте alt-текст, протестуйте клавіатуру. Шість типових помилок спричиняють 96% проблем — виправлення не потребує переробки всього сайту.
А якщо плануєте новий сайт — закладіть доступність із першого дня. Це дешевше, ефективніше і правильніше. Як замовити сайт і не пропустити важливе — окрема тема. Але доступність має бути в ТЗ з першого рядка.
95.9% сайтів не відповідають стандартам. Зробіть свій сайт винятком.
