Сайт без бар’єрів

Доступність сайту WCAG 2.2: чекліст з 12 пунктів і ціна

Володимир, співзасновник Першого Кабінету · перевірено 31 жовтня 2026 · читати 14 хвилин

Доступність сайту означає, що ним можуть користуватися люди зі слабким зором, слухом чи моторикою, а також будь-хто з розбитим екраном або на сонці. Я Володимир, і нижче ви знайдете стандарт WCAG 2.2 простими словами, дванадцять перевірок за вечір, порівняння способів аудиту, приклад стоматологічного сайту та чесну ціну нашої послуги з прайсу.

Доступний сайт, як і доступний офіс, не питає відвідувача, чи має він обмеження. Фото: Unsplash.

Доступність сайту: навіщо вона малому бізнесу

Багато власників вважають доступність темою для держустанов і великих корпорацій. Тим часом вона стосується кожного сайту, на якому хтось купує, записується або шукає телефон. Якщо кнопку не можна натиснути з клавіатури, а текст виглядає блідо на сонці, ви втрачаєте клієнтів ще до першої розмови.

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

Кому потрібна доступність сайту

• Люди зі слабким зором. Їм потрібні великий контраст, масштабування тексту й читач екрана.
• Люди з порушенням слуху. Їм потрібні субтитри та текстові версії відео й аудіо.
• Люди з обмеженою моторикою. Вони не користуються мишею й працюють з клавіатури чи голосом.
• Усі інші в незручних умовах. Яскраве сонце, повільний інтернет, один вільний палець.

Закон і доступність сайту: що відбувається в ЄС

Для українського бізнесу, що продає за кордон, доступність стає питанням ринку. Європейська комісія пояснює, що Європейський акт про доступність охоплює продукти й послуги, найважливіші для людей з інвалідністю.

На тій самій сторінці зазначено, що держави-члени мусили імплементувати акт у національне законодавство до червня 2022 року. Я не юрист, тож не обіцяю, що вимоги стосуються саме вас: перевірте умови своєї галузі й країни продажу. Але якщо у вас є інтернет-магазин для європейських покупців, питання доступності вже не абстрактне, і про побудову магазину ми писали у статті про інтернет-магазин під ключ.

WCAG 2.2 простими словами: чотири принципи

Стандарт WCAG розробляє W3C. Версію 2.2 опубліковано 5 жовтня 2023 року, а оновлення вийшло 12 грудня 2024 року. Вона додала дев'ять нових критеріїв успіху, зокрема мінімальний розмір цілей для натискання.

Рівні A, AA і AAA: який вибрати для сайту бізнесу

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

Доступність сайту на практиці: перевірки за один вечір

Вам не потрібні складні інструменти, щоб знайти половину проблем. Достатньо браузера, клавіатури й терпіння. Я розкладаю перевірки за чотирма темами.

Контраст тексту: перша перевірка доступності сайту за п'ять хвилин

Звичайний текст має контрастувати з фоном щонайменше 4,5 до 1. Світло-сірий #999999 на білому дає близько 2,85 до 1 і не проходить, а темніший #767676 вже дає близько 4,54 до 1. Різниця в кольорі здається дрібною, але для людини на сонці це різниця між «читаю» і «не бачу».

Клавіатура і фокус: доступність сайту без миші

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

Форми і помилки

У кожного поля має бути видимий підпис, а помилка описана словами. Червона рамка без тексту нічого не скаже людині, яка не розрізняє кольорів. Мінімальний розмір кнопки на телефоні за WCAG 2.2 це 24 на 24 пікселі, але комфортніше більше.

Картинки, відео і заголовки

Картинки зі змістом мають alt, декоративні можна лишити без опису. Відео потребує субтитрів. Заголовки йдуть по порядку, бо читачі екрана використовують їх як карту сторінки. Про те, як структуру заголовків поєднати з пошуком, ми писали в статті про SEO для малого бізнесу.

Читачі екрана: що чує людина, яка не бачить сторінку

Людина зі слабким зором часто користується програмою, яка зачитує сторінку вголос. Вона не бачить дизайну, вона слухає порядок елементів: заголовок, абзац, кнопка, посилання. Тому розмітка важливіша за вигляд. Кнопка, зроблена з картинки без опису, для неї мовчить, а посилання «читати далі» повторюється десять разів і нічого не розрізняє.

• Порядок. Вміст у коді йде в тому ж порядку, що й на екрані.
• Назви. Кожна кнопка та посилання пояснює, куди веде або що робить.
• Оголошення змін. Коли форма показує помилку чи кошик оновлюється, програма про це повідомляє.

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

Не потрібно ставати фахівцем із читачів екрана. Достатньо зрозуміти принцип: сайт описується словами, і ці слова мають бути зрозумілими без картинки. Якщо ви колись замовляли технічне завдання, додайте до нього окремий розділ про доступність, і виконавець врахує її від першого дня.

Порівняння 2026: ручна перевірка, сканер чи експертний аудит

Найкраща послідовність для малого бізнесу така: вечір ручної перевірки, потім сканер для масового пошуку помилок, і лише для критичних сторінок експертний огляд. Сканер не замінює людину, бо він не скаже, чи зрозумілий опис картинки.

Чекліст: чи доступний ваш сайт за WCAG 2.2

Відмічайте виконане. Двобальні пункти найчастіше блокують користувачів.

Спробуйте пройти власний сайт, не торкаючись миші: це найчесніший тест. Фото: Unsplash.

Скільки коштує доступність сайту у нас

У нашому прайсі є послуга «Доступність та Безбар’єрність (WCAG)» за 5 000 грн. Вона призначена для того, щоб привести вашу сторінку до міжнародних норм веб-доступності. Обсяг робіт залежить від поточного стану сайту, тому точні межі ми узгоджуємо в розмові, перш ніж ви платите.

Порівняйте з вартістю сайту загалом: як формується ціна, ми розбирали в статті про вартість сайту для бізнесу. Доступність найдешевше закласти одразу в технічне завдання, про що писали в статті про ТЗ на сайт: латати готовий сайт завжди дорожче. У фінансовій моделі BFM з методики City Profit цей рядок варто внести в бюджет запуску, а не в різні поточні витрати.

Приклад: сайт стоматологічної клініки

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

Типові помилки: чому доступність сайту ламається

• Накладка «для доступності». Віджет, що обіцяє виправити все однією кнопкою, не замінює якісної розмітки.
• Тільки кольоровий сигнал. Помилки й статуси мають мати текст чи значок.
• Вимкнене збільшення на телефоні. Заборона масштабування блокує людей зі слабким зором.
• Одноразова перевірка. Нові сторінки та банери знову ламають доступність, тож перевіряйте їх щоразу.

Швидкість теж частина зручності: повільні сторінки дратують усіх, а людей з обмеженнями найбільше. Перегляньте нашу статтю про швидкість сайту. Бюджет доступності варто внести і в бізнес-план, а як це робити, показує Bizon Planner.

Питання про доступність сайту

Чи обов'язкова доступність для малого бізнесу в Україні?

Я не юрист і не називаю загальної вимоги для кожного комерційного сайту, бо вимоги залежать від галузі та ринку. Для продажу в ЄС, державних замовлень і банківської сфери питання серйозніше. Порадьтеся з юристом.

Чи вистачить одного віджета з іконкою людини?

Ні. Віджет може допомогти збільшити шрифт, але не виправить контраст, фокус, структуру заголовків і підписи форм. Основа доступності живе в самій розмітці сайту.

З чого почати, якщо сайт уже працює?

Почніть з головної, сторінки послуг і форми заявки. Ці три сторінки несуть більшість зверненнь. Приклади наших проєктів дивіться в портфоліо.