WCAG-доступність сайту: чому це не опція, а вимога

Коли говорять про доступність сайту (accessibility, або скорочено a11y), багато хто одразу уявляє щось нішеве — "спеціальна версія для людей з інвалідністю", яку зробимо колись потім, якщо залишиться бюджет. Насправді доступність — це базова якість інтерфейсу, від якої виграють практично всі відвідувачі, а не вузька категорія людей. І дедалі частіше це ще й юридична вимога, а не побажання.

Що таке WCAG простими словами

WCAG (Web Content Accessibility Guidelines) — це міжнародний стандарт від W3C, який описує, як зробити вебконтент доступним для людей з різними типами обмежень: порушеннями зору, слуху, моторики, когнітивними особливостями. Стандарт побудований навколо чотирьох принципів, які легко запам'ятати за абревіатурою POUR: контент має бути Perceivable (сприйнятним — наприклад, через альтернативний текст для зображень), Operable (керованим — доступним із клавіатури, а не лише мишкою), Understandable (зрозумілим — передбачувана навігація й логіка) і Robust (надійним — коректно працює з допоміжними технологіями на кшталт скрінрідерів).

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

Чому це стосується будь-якого бізнесу, а не лише "соціальних" проєктів

За оцінками Всесвітньої організації охорони здоров'я, близько 16% населення планети живе з тією чи іншою формою інвалідності. Це не маргінальна аудиторія — це мільярди потенційних відвідувачів і покупців. Але вигода доступності ширша: доступний сайт зазвичай має чіткішу структуру заголовків, зрозумілішу навігацію і кращий контраст — а це впливає на зручність узагалі для всіх, включно з людьми, що переглядають сайт на яскравому сонці з телефону чи через повільний інтернет.

Є й прямий SEO-бонус: багато принципів WCAG перетинаються з тим, що любить пошуковик — описовий alt-текст, логічна ієрархія <h1>-<h6>, семантичний HTML замість купи безглуздих <div>.

Типові порушення, які легко виправити

Відсутній або беззмістовний alt-текст. alt="" для суто декоративного зображення — це нормально й навіть правильно. А от alt="image123.jpg" чи взагалі відсутній атрибут на змістовному фото — це вже проблема і для скрінрідера, і для Google Images.

Недостатній контраст тексту. Модний світло-сірий текст на білому фоні виглядає стильно в макеті дизайнера, але людям зі зниженим зором читати його важко чи неможливо. WCAG AA вимагає мінімальне співвідношення контрастності 4.5:1 для звичайного тексту.

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

Відсутні видимі стани фокусу. Коли елемент отримує фокус через Tab, має бути чітко видно, який саме — а не просто прибрана стандартна синя рамка браузера "для краси" без заміни на щось інше.

Формальні aria-атрибути без реального сенсу. ARIA-розмітка додає сенс, якого не вистачає в звичайному HTML, але неправильно застосована ARIA часто шкодить більше, ніж її повна відсутність — краще семантичний <button>, ніж <div role="button"> без повної підтримки клавіатури й станів.

Юридичний бік: це вже не просто добра практика

У Європейському Союзі з 28 червня 2025 року діє European Accessibility Act (EAA) — директива, яка вимагає доступності цифрових продуктів і послуг (включно з е-комерцією, банкінгом, транспортними сервісами) для компаній, що працюють на європейському ринку. Це означає, що для бізнесів, орієнтованих на аудиторію в ЄС, доступність — уже не "приємний бонус", а частина комплаєнсу, недотримання якого може мати юридичні наслідки залежно від країни й типу продукту.

Як швидко перевірити свій сайт

Не обов'язково запускати повний аудит із нуля. Безкоштовне розширення axe DevTools для Chrome чи Firefox сканує сторінку й показує конкретні порушення WCAG із поясненням, як саме їх виправити. Вкладка Lighthouse у Chrome DevTools також включає окремий розділ Accessibility з оцінкою від 0 до 100. І найпростіший ручний тест, який займе п'ять хвилин: спробуйте пройти головні сценарії сайту (відкрити меню, заповнити форму, натиснути на кнопку) лише клавіатурою, без миші.

З чого почати, якщо проблем виявилось багато

Як і з будь-яким аудитом, не треба виправляти все одразу. Почніть із того, що блокує людей найбільше: недоступність із клавіатури і відсутній alt-текст на змістовних зображеннях. Потім — контраст і видимі стани фокусу. ARIA-розмітку й тонші нюанси семантики можна доопрацьовувати поступово, паралельно з іншими релізами.

Якщо потрібно перевірити готовий сайт на відповідність WCAG чи закласти доступність ще на етапі верстки нового інтерфейсу — напишіть нам, обговоримо деталі →