Панель доступності
Панель адаптації для
кожного відвідувача сайту
Те, що йде далі за compliance: 32 інструменти і 8 профілів, якими відвідувач підлаштовує сайт під себе. Поверх вже виправленого коду — а не замість fix'у.
7 днів безкоштовно, без кредитної картки
Як це працює
Три кроки від встановлення до результату
Встановіть скрипт на сайт
Один рядок коду перед закриваючим тегом body — і панель починає працювати. Через плагін WordPress, редактор теми Shopify, Google Tag Manager або вручну. Без зміни існуючого HTML вашого сайту.
<!DOCTYPE html>
<html lang="uk">
<head>...</head>
<body>
...
<!-- Один рядок — і панель працює -->
<script
src="https://cdn.inclusiveweb.net/widget.js"
data-id="YOUR_ID"
async></script>
</body>
</html>Відвідувач відкриває панель
На сайті з'являється плаваюча кнопка доступності. Один клік — і відкривається панель з 8 профілями та 32 інструментами.
Панель доступності
Сайт адаптується миттєво
Відвідувач обирає налаштування — шрифт, контраст, маска читання. Сайт адаптується миттєво, без перезавантаження.
Спробувати безкоштовноЗбільшений шрифт, підсвічені заголовки і посилання. Маска читання й контраст під ваші потреби. докладніше
Три шари, а не три продукти
Аудит знаходить помилки. Автофікс їх виправляє. Панель іде далі — дає кожному відвідувачу персональні налаштування поверх вже доступного сайту.
Шар 1 — Аудит
Знаходить проблеми
Сканує сайт за 90+ правилами WCAG 2.1/2.2 та показує знайдені помилки доступності. Це діагностика — ви бачите, що саме порушує стандарт.
Шар 2 — Автофікс
Виправляє без зміни коду
Застосовує виправлення, знайдені аудитом — alt-тексти, ARIA, контраст, заголовки. Ви підтверджуєте кожну групу перед активацією.
Шар 3 — Панель
Іде далі за compliance
Технічна відповідність WCAG ≠ зручність для всіх. Літньому потрібен більший шрифт, людині з дислексією — Lexend Deca, при мігрені — монохром. Панель дає кожному відвідувачу персональні налаштування поверх вже доступного сайту.
Підлога і стеля
Compliance — це підлога: те, що сайт мусить мати, щоб не порушити закон. Inclusion — це стеля: те, як кожен відвідувач реально користується сайтом. Аудит і Автофікс будують підлогу. Панель піднімає стелю.
WCAG 2.2 AA + EAA 2025 вимагають доступного контенту. Аудит і Автофікс закривають технічну частину цих вимог — виправленнями поверх сторінки, без зміни вашого коду.
Реальна доступність = коли користувач сам обирає шрифт, контраст, темп. Це робить Панель — поверх вже виправленого сайту, не замість fix'у.
Що панель закриває за WCAG, а що ні
Номери критеріїв і чесне «ні» там, де панель не допомагає.
1.4.2 Керування аудіо
Вимикає звук у відео й аудіо, включно з YouTube і Vimeo.
2.2.2 Пауза, стоп, приховати
Зупиняє CSS- і JS-анімації, автовідтворення відео, анімовані GIF.
1.4.1 Використання кольору
Підкреслює всі посилання, включно з тими, що в кнопках і меню — техніка W3C G182. Кольорове кодування в графіках і статусах не виправляє.
2.4.1 Обхід блоків
Режим «Клавіатурна навігація» додає справжнє посилання «Перейти до основного вмісту» першим у порядку Tab. Навігатор по заголовках і розділах лишається другим шляхом.
1.4.4 Збільшення тексту
Шрифт до 250%, масштаб сторінки до 300% — техніка W3C G178.
2.5.8 Розмір цілі (мінімум)
Кнопки, посилання й поля — щонайменше 24×24 CSS-пікселі. Критерій WCAG 2.2.
1.4.3 Контраст
Вимірює кожну пару текст/фон і виправляє всі, що не проходять 4.5:1. Вимикається, якщо ви самі обрали колір тексту.
2.4.11 Фокус не перекрито (мінімум)
Той самий режим: відступ прокрутки під кнопку панелі й доскрол, якщо сфокусований елемент опинився під липкою шапкою сайту або нашою кнопкою. Критерій WCAG 2.2.
2.3.3 Анімація від взаємодії
Ставить на паузу CSS-анімації, CSS-переходи та Web Animations.
2.3.2 Три спалахи
Повна зупинка анімації без винятку «малої площі», плюс приховання відео та GIF.
2.4.13 Вигляд фокуса
Рівень «сильний»: суцільний контур 4 px з білою обвідкою — контраст 3:1 і на світлому, і на темному тлі.
1.4.8 Візуальне подання
Режим «Читабельний текст»: рядок до 80 знаків, міжрядковий від 1.5, абзацний інтервал 1.5× від нього, без вирівнювання по ширині. Колір тексту, заголовків і фону обирає відвідувач.
1.4.6 Контраст (підвищений)
Режим «Підвищений контраст»: вимірює кожну пару текст/фон і виправляє до 7:1 (4.5:1 для великого тексту).
Діє, лише коли відвідувач увімкнув відповідний інструмент, і в межах його сесії — сам сайт від цього відповідним не стає.
2.4.7 Видимість фокуса
Обводка на сфокусованому елементі, три рівні товщини.
1.4.12 Інтервали тексту
Міжрядковий від 1.5, інтервали літер, слів і абзаців.
2.3.1 Спалахи
Профіль «Епілепсія» зупиняє миготіння.
2.4.5 Кілька способів
Навігатор по заголовках, посиланнях і розділах — другий спосіб знайти контент. Власні способи сайту (пошук, карта сайту) лишаються за ним.
3.2.6 Узгоджена допомога
Форма зворотного зв’язку в тому самому місці панелі на кожній сторінці. Діє, лише поки віджет показано на всіх сторінках сайту.
4.1.2 Ім’я, роль, значення
Режим «Імена для скрінрідера»: авторський title або назва SVG-іконки переносяться в aria-label, коли в елемента немає іншого імені. Ролі, стани й вигадані імена — ні.
3.3.2 Підписи або інструкції
Той самий режим: поле, що має лише placeholder, отримує його як aria-label. Справжні підписи, інструкції й формати вводу лишаються за сайтом.
Діє в сесії відвідувача — сам сайт від цього відповідним не стає.
Alt-тексти — окремий продукт AI Alt-текст (Beta), а не частина Панелі. Про AI Alt-текст →
Не зараховуються за жодним критерієм. Це і є стеля: потреба людини, якої стандарт не описує.
Чесно про межі
Панель не дістає до покадрових JS-анімацій і до фреймів з інших доменів. І головне: відповідність — це властивість сторінки, яку ви віддаєте всім, тому жоден віджет не робить сайт відповідним сам по собі.
32 інструменти адаптації + 8 профілів
4 категорії адаптацій плюс 8 готових пресетів під найпоширеніші потреби: слабкий зір, дислексія, дальтонізм, РДУГ, епілепсія, когнітивні особливості, моторика, втома очей.
Повний список інструментів з описомКатегорія 01
Дислексія, когнітивні порушення, літній вік
Шрифт і читання
- Масштаб сторінки
- розмір шрифту
- інтервал літер
- інтервал слів
- міжрядковий інтервал
- інтервал абзаців
- шрифт для дислексії
- біонічне читання
- виділити заголовки
- виділити посилання
- вирівнювання тексту
- озвучення тексту (TTS)
Категорія 02
Візуальні налаштування
Дальтонізм, слабкий зір, чутливість до світла
Категорія 03
Утиліти та навігація
Моторні порушення, орієнтація на сторінці
Категорія 04
Комфорт перегляду
Епілепсія, РДУГ, фокусування
Кастомізація та технічні характеристики
Панель повністю адаптується під ваш бренд, а завантажувач не блокує рендер сторінки
Повна кастомізація під ваш бренд
Панель повністю адаптується під дизайн вашого сайту
Зсув по горизонталі та вертикалі в пікселях — кнопка стає точно там, де треба
5 стилів дизайну, 4 типи іконок
Повна відповідність фірмовому стилю
8 мов, включаючи українську
Використайте власну кнопку на сайті замість стандартної
Посилання на декларацію доступності
Готові налаштування, якщо сайт віддає Content-Security-Policy
Легкий та швидкий
Практично не впливає на швидкість завантаження вашого сайту
8 мов інтерфейсу
Панель автоматично відображається мовою відвідувача
Хіба це не оверлей?
Технічно так — це віджет поверх сторінки. Різниця не в тому, як він працює, а в тому, що ми не продаємо його як заміну виправленню коду і не заявляємо від нього відповідності стандарту. Код виправляє Автофікс — окремим шаром, з вашим підтвердженням кожної групи змін.
Чи закриває панель вимоги WCAG і Європейського акту про доступність?
Частково. Юридична вимога стосується самого сайту: доступного коду й контенту. Панель дає відвідувачу механізми, яких стандарт прямо вимагає в окремих критеріях — керування автоматичним звуком, зупинку рухомого контенту, вибір кольорів та інтервалів. Але субтитри, логіку форм, контраст у дизайні та кастомні компоненти вона не закриває. Аудит показує, що саме не відповідає, Автофікс автоматизує частину виправлень, решту робить ваша команда.
Чому ви не пишете «WCAG-відповідність в один клік»?
Тому що це неправда, і за такі твердження вже карають. У квітні 2025 року Федеральна торгова комісія США видала ордер на $1 млн проти постачальника накладного віджета за заяви про те, що продукт робить сайти відповідними WCAG. Ми натомість пишемо, який шар що закриває, і даємо звіт, який можна показати аудитору.
Чи вплине панель на швидкість мого сайту?
Ні. Async-завантажувач важить ~25 KB gzip і не блокує завантаження сторінки. Сама панель (~117 KB gzip) lazy-loaded в iframe тільки коли користувач відкриває її. Iframe-ізоляція гарантує, що стилі панелі не конфліктують з вашим сайтом.
Чи зберігаються налаштування відвідувача?
Так. Всі обрані налаштування зберігаються в браузері відвідувача (localStorage). При наступному візиті сайт одразу адаптується під його потреби.
Чи підтримується мобільна версія?
Так. Панель має адаптивний інтерфейс, оптимізований для смартфонів та планшетів. Всі інструменти доступні на будь-якому пристрої.
Чи можна обрати, які інструменти показувати?
Так. В кабінеті ви можете увімкнути або вимкнути будь-який інструмент та профіль. Налаштування оновлюються без зміни коду на сайті.
Як встановити на WordPress або Shopify?
Для WordPress — вставте код в footer через Customizer або будь-який плагін для вставки скриптів. Для Shopify — додайте в theme.liquid. Також підтримується Google Tag Manager.
Зробіть ваш сайт інклюзивним вже сьогодні
7 днів безкоштовно. Встановлення за хвилину.