15/09/2026
51 людей переглядають
1 хв читання

Доступність сайту: що вимагає European Accessibility Act і як перевірити свій

⚡ Стисла відповідь: З 28 червня 2025 року в ЄС діють вимоги European Accessibility Act, і вони поширюються на інтернет-магазини, які продають споживачам у Євросоюзі, незалежно від того, де зареєстрована компанія. Мікропідприємства, що надають послуги (до 10 працівників і не більше 2 млн євро обороту), звільнені. Водночас 95,9% головних сторінок мільйона найбільших сайтів мають помилки доступності, які знаходить автоматична перевірка, і 96% цих помилок припадає лише на шість типів. Більшість із них виправляються на рівні дизайну й верстки за кілька днів.

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

Кого стосується European Accessibility Act

Директива ЄС 2019/882 охоплює не всі сайти, а конкретні продукти й послуги. Для веб-студії та її клієнтів головна категорія — послуги електронної комерції.

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

Ситуація Чи діють вимоги EAA
Магазин продає споживачам у країнах ЄС, компанія має 15 працівників Так
Той самий магазин, але 6 працівників і оборот до 2 млн євро Ні — виняток для мікропідприємств, що надають послуги
Український магазин без доставки в ЄС Ні, але див. розділ про українське законодавство
Корпоративний сайт без можливості замовити онлайн Здебільшого ні
B2B-платформа, де купують тільки компанії Директива про споживчі договори, тож зазвичай ні

Кілька деталей, які часто подають неточно.

Виняток для мікропідприємств стосується лише послуг. Стаття 4(5) звільняє мікропідприємства саме від вимог до послуг. Критерій — менше 10 працівників і річний оборот або баланс не більше 2 млн євро. Щойно компанія переросте цей поріг, вимоги почнуть діяти.

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

Є перехідний період, але не для сайту. До 28 червня 2030 року можна не міняти продукти, які вже використовувались для надання послуги до 28 червня 2025 року — мова про обладнання на кшталт терміналів, а не про нові сторінки інтернет-магазину.

Ще є положення про «непропорційний тягар» (стаття 14): вимоги не застосовуються, якщо вони фундаментально змінюють суть послуги або створюють для компанії непропорційне навантаження. Але це треба обґрунтувати й задокументувати, а не просто заявити. Ця стаття не є юридичною консультацією: для конкретного бізнесу з продажами в ЄС варто уточнити вимоги країни, де у вас основні покупці.

А що в Україні

В Україні діє стандарт ДСТУ EN 301 549:2022, гармонізований з європейським. За даними Центру моніторингу цифрової інклюзії, з липня 2023 року він обов’язковий для сайтів центральних органів виконавчої влади та обласних адміністрацій. Для приватного бізнесу поки що ні.

Це може змінитись. 5 грудня 2025 року Кабмін подав до Верховної Ради законопроєкт № 14278 «Про цифрову доступність в Україні». Він поширює вимоги й на юридичних осіб, які надають електронні послуги, і зобов’язує публікувати на головній сторінці декларацію про відповідність. Зареєстровано також альтернативний проєкт. Підтвердження, що якийсь із них уже прийнято, ми на момент підготовки статті не знайшли, тож перевіряйте актуальний статус на сайті Ради.

Той самий моніторинговий центр оцінив 18 473 українські сайти: 92% не пройшли поріг належної доступності. Юридичні вимоги до сайту загалом — політику конфіденційності, cookie, згоди у формах — ми розбирали окремо в статті про юридичний мінімум для сайту.

Шість помилок, на які припадає 96% проблем

Звіт WebAIM Million 2026 перевірив мільйон головних сторінок. Картина стабільна з року в рік: одні й ті самі помилки, і стає тільки гірше — кількість помилок на сторінку зросла з 51 до 56,1.

Помилка Частка головних сторінок Чия це зона
Низький контраст тексту 83,9% Дизайн
Зображення без альтернативного тексту 53,1% Контент і верстка
Поля форм без підписів 51% Дизайн і верстка
Порожні посилання 46,3% Верстка
Порожні кнопки 30,6% Дизайн і верстка
Не вказано мову документа 13,5% Верстка

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

Низький контраст

У середньому на кожній головній сторінці 34 окремі місця з недостатньо контрастним текстом, і за рік їх стало на 15% більше. Вимога WCAG 1.4.3 — співвідношення щонайменше 4,5:1 для звичайного тексту і 3:1 для великого. Великим вважається текст від 18 пунктів, тобто приблизно 24 пікселі, або від 14 пунктів жирного — близько 18,5 пікселя.

Типові порушники: світло-сірий текст на білому, який дизайнер обрав «для легкості»; білий текст поверх фотографії без затемнення; плейсхолдери в полях форм; дрібні підписи під ціною. Знайоме? У макеті на дорогому моніторі все виглядає охайно, а на телефоні на сонці текст просто зникає — і страждає від цього не лише людина з порушенням зору, а будь-хто, хто вийшов із телефоном на вулицю.

Зображення без alt

Екранний читач натрапляє на картинку без опису й зачитує назву файлу — щось на кшталт «IMG_4471 крапка jpg». Для товарного фото в магазині це означає, що незряча людина не дізнається, який вигляд має товар. Правило просте: змістовне зображення отримує короткий опис того, що на ньому; декоративне — порожній атрибут alt, щоб читач його пропустив.

Поля форм без підписів

Найпоширеніший дизайнерський прийом, що ламає доступність, — плейсхолдер замість підпису. Сіре «Ваш телефон» усередині поля виглядає мінімалістично, але зникає, щойно людина почала вводити, і зазвичай не має достатнього контрасту. Екранний читач часто взагалі не озвучує, що це за поле.

Порожні посилання й кнопки

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

Чому це не лише про людей з інвалідністю

Найчастіше заперечення, яке ми чуємо від власників бізнесу: «у нас таких клієнтів майже немає». Проблема в тому, що доступність стосується значно ширшого кола людей, ніж здається, і більшість із них ніколи не назве себе людиною з інвалідністю. Це покупець 60+, якому дрібний сірий шрифт уже не читається. Людина зі зламаною рукою, яка тиждень користується тільки клавіатурою. Хтось із тимчасово розширеними зіницями після окуліста. Водій, який голосом диктує запит. Будь-хто на вулиці в сонячний день. Коли ми в Netloria виправляємо контраст і підписи форм на проєкті, це майже ніколи не подається клієнту як «доступність для людей з інвалідністю» — це подається як зручність для всіх, бо саме так воно й працює на практиці.

Є і другий аргумент. Альтернативний текст, правильна ієрархія заголовків, вказана мова сторінки й зрозумілі тексти посилань — це ті самі сигнали, за якими пошукові системи й AI-асистенти розуміють вміст сторінки. Прямого бонусу в ранжуванні «за доступність» Google не обіцяє, тож не варто продавати це як SEO-трюк. Але чистіша структура нікому не шкодила.

Віджет доступності не вирішує проблему

Популярна пропозиція ринку — встановити скрипт-оверлей, який «автоматично робить сайт відповідним WCAG». Панелька з кнопками «збільшити шрифт» і «висока контрастність» у кутку екрана.

Показовий кейс: 22 квітня 2025 року Федеральна торгова комісія США затвердила рішення, за яким компанія accessiBe сплачує 1 мільйон доларів. Компанія стверджувала, що її плагін може зробити будь-який сайт відповідним WCAG. FTC визнала ці твердження неправдивими, оманливими або необґрунтованими й заборонила їх повторювати без доказів.

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

Як перевірити свій сайт за годину

Повний аудит на відповідність — робота для фахівця. Але основні проблеми видно й без нього.

  1. Автоматична перевірка. Вбудований у Chrome Lighthouse (вкладка Accessibility) або безкоштовне розширення WAVE від WebAIM. Пам’ятайте, що автоматика ловить лише частину проблем — тих, які можна виявити машинно.
  2. Тест клавіатурою. Відкладіть мишку й пройдіть шлях від головної до оформлення замовлення тільки клавішами Tab, Enter і пробілом. Чи видно, де зараз фокус? Чи можна відкрити меню, обрати розмір, закрити спливаюче вікно?
  3. Збільшення до 200%. Масштабуйте сторінку в браузері. Текст не повинен налазити один на одний чи обрізатися.
  4. Екранний читач. VoiceOver вбудований у кожен Mac та iPhone, NVDA для Windows безкоштовний. П’ять хвилин прослуховування власної форми замовлення зазвичай переконують краще за будь-який звіт.
  5. Помилка у формі. Відправте форму з неправильним телефоном. Чи пояснює сайт текстом, що не так, чи лише підсвічує поле червоним?

Останній пункт недооцінюють. Червона рамка без тексту — це повідомлення, яке не бачать люди з порушенням розрізнення кольорів, а таких серед чоловіків помітна частка.

Новий сайт і наявний: різний підхід

Новий сайт Наявний сайт
Коли закладати У дизайн-системі: кольори, розміри шрифтів, стани кнопок Після аудиту, починаючи з найпоширеніших шаблонів
Що дає найбільший ефект Палітра з перевіреним контрастом і підписи в компонентах форм Контраст, alt, форми й кнопки-іконки — ті самі шість помилок
Складність Майже не додає часу, якщо з першого макета Залежить від кількості шаблонів і плагінів
Типова пастка Макет затвердили «на око», без перевірки контрасту Виправили головну, а кошик і чекаут лишились як були

Для наявного магазину пріоритет — не головна сторінка, а шлях до покупки: картка товару, кошик, оформлення. Саме там незручність коштує грошей, і саме там найчастіше живуть кастомні кнопки-іконки та форми з плейсхолдерами.

Помилки, які ми бачимо найчастіше

  • Фірмовий колір, що не проходить контраст. Кнопка в брендовому світло-зеленому з білим текстом. Рішення не в тому, щоб міняти бренд, а в тому, щоб на кнопці був темний текст або темніший відтінок кольору.
  • Слайдер з автопрокруткою. Текст зникає раніше, ніж людина встигає дочитати, і кнопки паузи немає.
  • Посилання «детальніше». Десять однакових «детальніше» на сторінці нічого не кажуть тому, хто переходить між посиланнями клавіатурою.
  • Видалений контур фокусу. Дизайнерам він здається некрасивим, тож його прибирають одним рядком CSS, і користувач клавіатури втрачає орієнтацію.
  • Відео без субтитрів на сторінці послуги, де вся суть пояснена голосом.

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

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