European Accessibility Act і ваш сайт: що перевірити самостійно

Якщо ви продаєте онлайн споживачам у ЄС, вимоги European Accessibility Act до вебсайтів діють для вашого магазину з 28 червня 2025 року, якщо тільки ваш бізнес не є мікропідприємством. Багато серйозних проблем можна знайти самостійно: оформіть тестове замовлення лише з клавіатури, збільште масштаб сторінки й спробуйте кожну форму. Але самоперевірка не може довести, що весь сайт відповідає стандарту.

Можливо, про цей закон уже згадував розробник або в листі вам пропонували віджет, який нібито робить будь-який сайт «відповідним» одним рядком коду. Покупець, який не може пройти оформлення замовлення з клавіатурою чи з екранним читачем (програмою, що читає сторінку вголос), може піти в інший магазин і навіть не поскаржитися.

Чи поширюється European Accessibility Act на ваш сайт?

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

• Мікропідприємства, які надають послуги, звільнені від вимог. Це стаття 4(5). Директива визначає мікропідприємство як таке, де працює менше ніж 10 осіб, а річний оборот або загальна сума річного балансу не перевищує 2 млн євро. Враховуються і кількість працівників, і один із двох фінансових критеріїв: команда з десяти людей під виняток не підпадає, хоч яким малим був би оборот.
• Продаж лише бізнесу. Визначення стосується споживчих договорів. Якщо приватні покупці можуть замовити через ваш кошик, вважайте, що сайт підпадає під дію акта.
• Сайт, який нічого не продає. Сайт компанії без замовлень, бронювань чи оплат зазвичай не є послугою електронної комерції у визначенні директиви. Бронювання та оплати це змінюють.
• Дата 2030 року стосується товарів і старих договорів. Перехідний період до 28 червня 2030 року за статтею 32 охоплює товари, що використовуються для надання послуги, і договори, підписані до червня 2025 року.

Кожна країна ЄС забезпечує виконання акта через власний закон і сама встановлює санкції; у Німеччині це BFSG. Якщо ваш бізнес зареєстровано у Швейцарії чи Великій Британії і ви продаєте споживачам у ЄС, запитайте юриста, як ці правила застосовуються до вас.

Чому сайти магазинів не проходять перевірку доступності?

Помилки, наведені нижче, зазвичай виникають через рішення щодо дизайну і форм, які один раз ухвалили в темі й повторили на кожній сторінці. Директива (ЄС) 2019/882 вимагає, щоб вебсайти були «сприйнятними, керованими, зрозумілими та надійними». Європейський стандарт, що перетворює це на тести, EN 301 549, спирається на WCAG - настанови з доступності вебконтенту, які публікує W3C. WCAG поділяє критерії на три рівні: A (мінімум), AA і AAA. Рівень AA і є метою, яку використовує стандарт.

Рамку фокуса прибрали заради вигляду. Коли людина рухається сторінкою клавішею Tab, браузер малює рамку навколо активного посилання чи кнопки. Деякі теми її приховують, бо вона виглядає неохайно, хоча WCAG вимагає видимого індикатора фокуса. Критерій, доданий у WCAG 2.2, також каже, що елемент у фокусі не повинен бути повністю закритий власним вмістом сайту, наприклад закріпленою шапкою чи банером cookie.

Текст надто блідий. WCAG вимагає коефіцієнта контрасту, тобто того, наскільки текст темніший або світліший за фон, щонайменше 4,5:1 для звичайного тексту і 3:1 для великого. Сканування мільйона головних сторінок, яке WebAIM провів у 2026 році, виявило текст із низьким контрастом на 83,9 % із них. Світло-сірий на білому та білий на пастельній кнопці - найтиповіші випадки.

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

Оформлення замовлення зробили під мишку. Нестандартні випадні списки, CAPTCHA-головоломки та входи, які просять запам’ятати чи повторно ввести код, зупиняють людей, які користуються клавіатурою або екранним читачем. Для електронної комерції директива окремо називає ідентифікацію, безпеку та оплату. У березні 2026 року нідерландський регулятор у сфері захисту споживачів ACM повідомив, що в 61 % перевірених ним великих нідерландських інтернет-магазинів та інших великих споживчих сайтів замовлення не вдавалося оформити за допомогою допоміжних технологій, як-от екранного читача.

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

Як самостійно перевірити сайт на відповідність European Accessibility Act

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

1. Відкладіть мишку. Рухайтеся кожною сторінкою за допомогою Tab і Shift+Tab, користуйтеся Enter, пробілом і клавішами зі стрілками. Ви маєте дістатися меню, фільтрів, кнопки додавання в кошик, кожного поля форми й кнопки оплати. У будь-який момент має бути видно, де ви перебуваєте. Позначте, де рамка ховається за закріпленою шапкою чи банером cookie і чи можна вийти з меню або вікна чату.
2. Збільште масштаб. Встановіть у браузері 200 %. WCAG очікує, що текст залишиться читабельним, а вміст не обрізатиметься і не накладатиметься. Потім зробіть вікно завширшки приблизно 1280 пікселів і збільште масштаб до 400 %: вміст має вміщатися за шириною без горизонтального прокручування, за винятком таких елементів, як мапи й таблиці даних.
3. Перевірте блідий текст. Інструменти розробника в Chrome, Edge і Firefox показують коефіцієнт контрасту вибраного кольору тексту. Перевірте основний текст, ціни, кнопки та дрібний сірий текст під полями форм.
4. Спробуйте кожну форму порожньою, а потім із помилками. Кожному полю потрібен видимий підпис, який не зникає під час введення. Надішліть форму порожньою: помилка має словами пояснювати, чого бракує, стояти біля поля і зберігати те, що ви вже ввели. Новий критерій WCAG 2.2 також вимагає, щоб інформація, яку ви вже вводили в межах того самого процесу, наприклад адреса, заповнювалася автоматично або пропонувалася для вибору. Інші причини, через які форма коштує вам замовлень, - у нашій статті про те, чому відвідувачі сайту не залишають заявок.
5. Увійдіть в акаунт і пройдіть антиспам-перевірку. WCAG 2.2 каже, що вхід не повинен залежати від тесту когнітивних функцій, як-от запам’ятати пароль чи розв’язати головоломку, якщо немає альтернативи чи допомоги, наприклад менеджера паролів або вставлення з буфера. CAPTCHA-головоломка без іншого варіанту тут не проходить.
6. Подивіться на зображення товарів. Клацніть зображення правою кнопкою миші й виберіть «Переглянути код» (Inspect). Альтернативний текст (alt), короткий опис, який зачитує екранний читач, має пояснювати, що це за товар; суто декоративні зображення можуть мати порожній alt.
7. Повторіть ключові кроки на телефоні. Дрібні іконки, розташовані близько одна до одної, важко натиснути. WCAG 2.2 встановлює мінімальний розмір цілі 24 на 24 CSS-пікселі (одиниця розміру самої вебсторінки), з винятками, наприклад коли навколо цілі достатньо вільного місця.

W3C зауважує, що сторінка «може ніби проходити ці перевірки, але все одно мати суттєві бар’єри доступності». Наступний крок - тест людиною, яка щодня користується екранним читачем.

Що виправляти першим?

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

1. Не встановлюйте оверлей. Порада Європейської комісії - усувати проблеми доступності «в їхньому джерелі», а для магазину це тема, форми та оформлення замовлення.
2. Поверніть рамку фокуса і зробіть текст темнішим. Обидва параметри зазвичай задаються в налаштуваннях кольорів і стилів теми. Ми починаємо з того, що один раз задаємо контраст у дизайн-палітрі й перевіряємо його у світлій і темній версіях сайту, тож нова сторінка одразу отримує кольори, які проходять перевірку.
3. Переробіть форми. Видимі підписи, помилки словами біля поля, збереження введених даних після помилки, перенесення фокуса на перше поле, яке треба виправити, і автозаповнення браузера для імені, email та адреси. У наших проєктах із розробки сайтів ми починаємо із самого компонента форми, тож кожна нова форма вже має ці виправлення.
4. Додайте alt-тексти та мову сторінки. Опишіть зображення товарів і змістові зображення та переконайтеся, що кожна сторінка вказує свою мову, щоб екранний читач вимовляв текст правильно. Пошукові системи читають ті самі alt-тексти й атрибут мови, тому вони належать і до технічної SEO-роботи.
5. Виправте оформлення замовлення, вхід і сторонні віджети. Замініть CAPTCHA-головоломки перевірками, які нічого не просять розв’язувати, і запропонуйте спосіб входу, що не залежить від пам’яті. Віджети оплати й чату надають постачальники: попросіть у кожного інформацію про доступність і замініть ті, до яких не можна дістатися з клавіатури.
6. Опублікуйте інформацію про доступність. Додаток V до директиви вимагає від постачальників послуг описати, як послуга відповідає вимогам, у загальних умовах або рівноцінному документі. Подробиці визначає ваш національний закон.
7. Рухайтеся до WCAG 2.2 рівня AA. Версія 4.1.1 стандарту EN 301 549, опублікована у вересні 2026 року, додає шість вимог із WCAG 2.2, повідомляє AccessibleEU. Доки Комісія не наведе її в Офіційному віснику ЄС, як зазначає те саме джерело, орієнтиром залишається версія 3.2.1, побудована на WCAG 2.1 рівня AA. Національне управління з питань інвалідності Ірландії (National Disability Authority) очікує, що його наведуть там 16 грудня 2026 року. Якщо виправляти під WCAG 2.2 вже зараз, нові вимоги будуть закриті, коли це станеться.

Директива допускає виняток, якщо дотримання вимог стало б непропорційним тягарем, але вимагає оцінки, а в її преамбулі сказано, що «відсутність пріоритету, часу чи знань» не є законною підставою.

Що вимірювати після виправлень?

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

1. Тестове замовлення лише з клавіатури, від сторінки товару до підтвердження, не торкаючись мишки.
2. Перелік знахідок безкоштовного автоматичного тесту, наприклад Lighthouse у Chrome, запущеного на тих самих трьох типах сторінок. Перегляньте знахідки й перевірте, які з них залишилися.
3. Форми, надіслані з помилками, щоб переконатися, що кожну помилку описано словами і нічого з введеного не втрачено.
4. Опублікована інформація про доступність, оновлена після кожної зміни, що впливає на те, як клієнти замовляють.

Де ми можемо допомогти

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

← Усі статті