Доступність сайту та European Accessibility Act: що бізнес зобов'язаний зробити до 2026 року

У кав’ярні на Хрещатику власник невеликого магазину одягу показує мені свій сайт з телефона і скаржиться на продажі. Сайт гарний: великі фото, тонкий світло-сірий текст на білому, кошик за іконкою без підпису. Я прошу його на хвилину заплющити очі й оформити замовлення голосом — вмикаю на його ж телефоні вбудований скрінрідер. За двадцять секунд він здається: озвучка читає «кнопка, кнопка, посилання, зображення», поля форми без назв, а до оплати він так і не дійшов. «І що, хтось справді так купує?» — питає він. У Євросоюзі так купують десятки мільйонів людей, і доступність сайту для них — не примха, а єдиний спосіб узагалі дійти до оплати. А з червня 2025 року те, що він щойно побачив, — це ще й пряме порушення закону.

Доступність сайту перестала бути темою «для ентузіастів» і питанням гарного тону. З 28 червня 2025 року в Євросоюзі діє European Accessibility Act (EAA) — і вперше недоступний сайт став не естетичним промахом, а юридичним ризиком з конкретним цінником. Це стосується не благодійних порталів і не держустанов, а звичайного комерційного бізнесу: магазинів, банків, сервісів бронювання, усіх, хто продає людям онлайн.

І ось що в цій історії мало хто проговорює вголос: той самий сайт, який не пускає людину зі скрінрідером, наполовину невидимий і для пошукового робота. Доступність і SEO ростуть з одного кореня — з чистої, зрозумілої машині структури. Тому привести сайт у відповідність до EAA — це не штраф-податок, який ви платите неохоче. Це робота, яка заодно піднімає позиції та конверсію. Розберемо по черзі: що вимагає закон, кого він стосується, що таке WCAG простими словами і з чого почати аудит.

Що таке European Accessibility Act і чому червень 2025 — це дедлайн

EAA — це директива Євросоюзу (2019/882), яка вимагає, щоб ціла низка товарів і цифрових послуг була доступна людям з інвалідністю. Ухвалили її ще 2019-го, країнам дали кілька років на те, щоб перенести її в національні закони, а бізнесу — на підготовку. Це вікно зачинилося: з 28 червня 2025 року вимоги діють і застосовуються на практиці.

Важливо зрозуміти логіку закону, щоб не шукати в ньому того, чого там немає. EAA не диктує, якою кнопкою і якого кольору має бути ваш сайт. Він задає результат: послуга має бути доступна людині з порушеннями зору, слуху, моторики чи когнітивних функцій — нарівні з усіма. А як саме ви цього досягнете технічно — описує європейський стандарт EN 301 549, який, своєю чергою, спирається на міжнародні рекомендації WCAG. Ланцюжок простий: закон (EAA) → технічний стандарт (EN 301 549) → перевірюваний чек-лист (WCAG рівня AA).

Ще одна деталь, яку часто плутають. EAA — це не те саме, що Web Accessibility Directive 2016 року. Та, ранніша директива стосувалася сайтів державного сектору. EAA вперше поширює схожі вимоги на приватний бізнес і споживчі послуги. Якщо ви раніше думали «доступність — це для держсайтів, мене не стосується» — з 2025 року це вже не так.

Кого це стосується насправді

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

• Інтернет-магазини та e-commerce — практично будь-яка роздрібна онлайн-торгівля кінцевому покупцеві.
• Банківські та платіжні послуги — онлайн-банкінг, платіжні сервіси, усе, що пов’язане зі споживчими фінансами.
• Транспорт і квитки — сайти та застосунки для купівлі квитків, бронювання, розкладів.
• Електронні книжки та їхні магазини, рідери.
• Телеком-послуги та обладнання для них.
• Аудіовізуальні сервіси — доступ до стрімінгових платформ і подібного.

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

Є один помітний виняток — мікропідприємства, що надають послуги: компанії, де менше ніж 10 осіб і річний оборот (або баланс) не перевищує 2 млн євро, звільнені від частини вимог саме до послуг. Але не тіштеся: по-перше, виняток вузький і не поширюється на виробників і продавців фізичних товарів; по-друге, щойно бізнес росте, він зникає; по-третє, навіть якщо формально ви під нього потрапляєте, недоступний сайт далі втрачає вам клієнтів і позиції в пошуку. Закон — це нижня планка, а не мета.

Простий тест на причетність: ви продаєте щось людям у ЄС через сайт чи застосунок? Якщо так — виходьте з того, що EAA вас стосується, і доводьте протилежне лише через конкретну норму національного закону, а не «на око».

WCAG простими словами: що таке доступний сайт

WCAG (Web Content Accessibility Guidelines) звучить як щось, що потребує окремої освіти. Насправді все тримається на чотирьох людських принципах: контент має бути сприйнятним (його можна побачити або почути), керованим (ним можна користуватися без миші), зрозумілим і надійним (його коректно читають допоміжні технології). Рівень відповідності, який вимагає EAA, — AA. Ось що це означає на практиці, без жаргону.

Контраст тексту

Світло-сірий текст на білому тлі виглядає «повітряно» в портфоліо дизайнера і нечитабельно — для людини зі слабким зором, а заразом і для будь-кого, хто дивиться на екран під сонцем. WCAG AA вимагає коефіцієнта контрасту не нижче 4.5:1 для звичайного тексту і 3:1 для великого. Це найчастіша і найдешевша у виправленні помилка: досить затемнити текст і перевірити пари кольорів контраст-чекером. Якщо ви затіваєте оновлення палітри, це природний момент закласти контраст у самі дизайн-токени під час редизайну сайту, а не латати постфактум.

Робота з клавіатури

Величезна частина користувачів — люди з порушенням моторики, незрячі, та й просто досвідчені користувачі — не торкаються миші. Весь сайт має працювати з клавіатури: ним можна пройти клавішею Tab, видно, який елемент зараз у фокусі (та сама рамка, яку дизайнери так люблять прибирати), а зі спливних вікон можна вийти. Перевіряється за хвилину: заберіть руку з миші й спробуйте оформити замовлення лише клавіатурою. Де застрягли — там баг.

Текстові альтернативи (alt)

Скрінрідер не бачить картинку — він читає її опис з атрибута alt. Немає опису — для незрячої людини на цьому місці діра, інколи озвучена як беззмістовне ім’я файлу. Кожне змістовне зображення має мати короткий осмислений опис; суто декоративні — порожній alt, щоб озвучка їх пропускала. Бонус, заради якого це люблять маркетологи: той самий alt читає і Google, і це один із факторів ранжування картинок.

Форми з підписами

Поле введення без підпису — це поле-загадка. Плейсхолдер сірим текстом усередині поля не вважається підписом: він зникає, щойно починаєш друкувати, і скрінрідер його часто не озвучує. Кожне поле повинно мати програмно пов’язаний <label>, а помилки («невірний e-mail») — пояснюватися текстом, а не лише червоною рамкою. Для бізнесу це критично вдвічі: форма — це місце, де народжується заявка, і недоступна форма напряму ріже продажі. Якщо ви наводите лад у формах захоплення лідів, доступність і конверсія лагодяться одним рухом.

Структура заголовків і семантика

Скрінрідер ходить по сторінці, як по змісту, — стрибає по заголовках. Якщо на сторінці один справжній <h1>, а далі логічна ієрархія <h2>/<h3>, незряча людина орієнтується миттєво. Якщо всі «заголовки» — це просто великий жирний текст без тегів, навігації немає. Та сама семантика — кнопки позначені як кнопки, посилання як посилання, списки як списки — потрібна і пошуковому роботові. Структура, по суті, єдина.

Доступність сайту і SEO: чому це одна робота, а не дві

Ось думка, заради якої варто було все це читати. Скрінрідер і пошуковий робот Google «бачать» вашу сторінку напрочуд схоже: ні той, ні інший не дивляться на гарну картинку — обидва йдуть по коду, по структурі, по тексту. Тому майже кожна вимога доступності за збігом виявляється і фактором, який допомагає в пошуку.

Вимога доступності	Що це дає в SEO
alt до зображень	Ранжування в пошуку по картинках, контекст для сторінки
Чиста структура h1→h2→h3	Google розуміє ієрархію контенту, шанси на rich-сніпети
Осмислені тексти посилань	Краще розподіляється вага посилань, зрозуміліші анкори
Підписи й транскрипти до відео	Індексований текст замість «сліпого» для робота відео
Семантична розмітка	Чистіший парсинг сторінки, основа для Schema.org
Швидка, легка верстка	Прямий внесок у Core Web Vitals

Останній рядок — окрема тема. Доступні сайти, як правило, легші й охайніше влаштовані, а це напряму покращує Core Web Vitals — LCP, INP і CLS, які Google 2026 року враховує в ранжуванні. Стрибуча при завантаженні верстка (поганий CLS) однаково мучить і людину з порушенням моторики, яка не може поцілити по «втікаючій» кнопці, і ваші позиції.

І ще один зсув 2026 року: AI Overviews у Google та асистенти на кшталт ChatGPT збирають відповіді зі сторінок із чіткою, машиночитаною структурою. Та сама семантика, що потрібна скрінрідеру, — це рівно те, що допомагає вашому контенту потрапити у відповідь ШІ. Доступність сайту, SEO та цитованість в AI-пошуку виявилися трьома назвами однієї й тієї самої гігієни коду.

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

Як провести аудит доступності: з чого почати цього тижня

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

1. Прожену автоматичний сканер. Безкоштовні інструменти (наприклад, розширення axe DevTools чи WAVE, перевірка Lighthouse у Chrome) за хвилину підсвітять контраст, відсутні alt, непідписані поля. Застереження: автоматика ловить добре якщо 30–40% проблем — вона не замінює ручної перевірки, а лише показує верхівку.
2. Пройдіть ключовий шлях лише клавіатурою. Заберіть мишу й спробуйте зробити головну дію сайту — оформити замовлення, відправити форму, забронювати. Де фокус зник або ви застрягли — пріоритетний баг.
3. Увімкніть скрінрідер і послухайте. На Mac це VoiceOver (Cmd+F5), у Windows вбудований Narrator, є безкоштовний NVDA. Заплющіть очі й пройдіть головну сторінку та оформлення замовлення. Це протверезає сильніше за будь-який звіт.
4. Перевірте контраст вручну на ключових екранах — кнопки, посилання, текст на фото, світло-сірі підписи.
5. Зафіксуйте знахідки й оцініть обсяг. Частина правок (контраст, alt, підписи форм) — це години. Частина (зламана клавіатурна навігація, непрацюючі модальні вікна, саморобні «кнопки» з <div>) іде в шаблони й компоненти — і тоді чесніше закладати повноцінний редизайн з доступністю в основі, ніж латати діру за дірою.

Чого точно не робити — це вішати віджет-оверлей: плаваючу кнопку «доступність», яка обіцяє «виправити» сайт перемикачем шрифту й контрасту. Це найпоширеніша пастка. Оверлеї не чіпають вихідний код, скрінрідери їх нерідко ігнорують або конфліктують з ними, а критерії WCAG лишаються невиконаними. І регулятори, і спільнота людей з інвалідністю прямо попереджають: оверлей не забезпечує відповідності EAA, а в низці країн сам ставав приводом для позовів. Справжня доступність правиться в розмітці й у дизайні — там, де живе причина, а не в накладці поверх симптому.

Що це означає для грошей і строків

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

Головна економія — у часі. Доступність, закладена на етапі дизайну й верстки, майже безкоштовна: правильний контраст, семантичні теги й підписані форми не коштують дорожче за неправильні. Доступність, прикручена до готового сайту заднім числом, коштує в рази більше і завжди виходить компромісною. Тому якщо у вас попереду новий сайт чи редизайн — найдешевше рішення у вашому житті прямо зараз — це вимагати відповідності WCAG AA в самому технічному завданні.

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

Хто зрештою виграє

Повернімося до власника магазину в кав’ярні. Під кінець розмови він перестав питати «хто так узагалі купує» і почав питати «скільки це лагодити». Це правильний зсув. Доступність перестала бути добровільним жестом доброї волі — з червня 2025 року це вимога ринку ЄС, у якої є штрафи, позови і дедлайн у минулому, а не в майбутньому.

Але виграє в цій історії не той, хто зі зітханням закриває мінімальні вимоги закону. Виграє той, хто зрозумів, що доступний сайт — це просто добре побудований сайт: його читають люди зі скрінрідером, його любить Google, його цитує ШІ, і він не втрачає покупця на півдорозі до оплати. EAA лише зробив обов’язковим те, що й так варто було зробити. Ті, хто це почув, зараз тихо забирають і аудиторію, і позиції в сусідів, які все ще сподіваються відбутися плаваючою кнопкою в кутку екрана.