Доступні контактні форми та Європейський акт про доступність

Контактна форма часто є єдиними дверима між відвідувачем і Вашим бізнесом. Якщо ці двері можна відчинити лише мишею, добрим зором і терпінням для розв’язання розмитої головоломки із зображенням, дехто просто залишається зовні. Із середини 2025 року це вже не лише питання зручності: для багатьох підприємств, що продають споживачам у ЄС, воно стало правовим.

Що охоплює Європейський акт про доступність

Європейський акт про доступність (Директива (ЄС) 2019/882) застосовується з 28 червня 2025 року. Він установлює вимоги доступності для певних продуктів і послуг, пропонованих споживачам, зокрема електронної торгівлі, споживчих банківських послуг, електронних книжок, електронних комунікацій і частини пасажирських перевезень. Для сайту це означає онлайн-магазин або банківську послугу загалом, разом із формами, через які клієнти зв’язуються з Вами, ставлять запитання чи скаржаться. Мікропідприємства, які надають послуги, звільнені: підприємства з менш ніж десятьма працівниками та річним оборотом або підсумком балансу не більш як EUR 2 мільйони. Пропозиції, орієнтовані виключно на інші підприємства, зазвичай поза сферою дії.

Кожна держава-член перенесла директиву в національне право. У Німеччині це Barrierefreiheitsstärkungsgesetz (BFSG), у Польщі — закон 2024 року про забезпечення відповідності певних продуктів і послуг вимогам доступності. Наглядові органи та санкції різняться залежно від країни, але технічний орієнтир переважно однаковий: на практиці європейський стандарт EN 301 549, який своєю чергою ґрунтується на Настановах із доступності вебвмісту (WCAG).

Чому це вигідно навіть без правового обов’язку

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

Практичний список перевірок із посиланнями на WCAG 2.2

• Видимі підписи, пов’язані з полями (1.3.1, 3.3.2): кожне поле має видимий підпис, прив’язаний через for/id. Самої підказки в полі недостатньо — вона зникає, щойно людина починає вводити текст.
• Повідомлення про помилки, що пояснюють виправлення (3.3.1, 3.3.3): назвіть поле, скажіть, що неправильно та як це виправити, — текстом, а не лише червоною рамкою. «Введіть адресу електронної пошти на кшталт name@example.com» краще за «Неправильне введення».
• Повне керування клавіатурою (2.1.1, 2.1.2): кожне поле, прапорець, CAPTCHA та кнопка надсилання доступні й керовані клавішами Tab, Space та Enter без клавіатурних пасток.
• Видимий фокус (2.4.7): Ви завжди бачите активне поле. Видалення рамки фокуса браузера без заміни порушує цей критерій.
• Достатній контраст (1.4.3): текст, підписи й повідомлення про помилки мають співвідношення контрасту з тлом щонайменше 4.5:1 (3:1 для великого тексту).
• Розмір цілі (2.5.8): кнопки, прапорці й посилання мають щонайменше 24 × 24 CSS-пікселі або достатні відступи навколо.
• Альтернативи CAPTCHA (1.1.1) і доступна автентифікація (3.3.8): 1.1.1 вимагає текстової альтернативи та CAPTCHA в більш ніж одній сенсорній формі; 3.3.8 суворо стосується кроків входу, але його ідею можна перенести — головоломка на кшталт передруковування спотворених літер або обчислення суми не повинна бути єдиним шляхом. Запропонуйте альтернативу або метод, що взагалі не потребує головоломки.
• Поля-пастки, приховані від допоміжних технологій: обгортка поля-пастки отримує aria-hidden="true", а поле — tabindex="-1", тож користувачі програм читання з екрана та клавіатури ніколи на нього не потрапляють.

CAPTCHA та поля-пастки: де захист від спаму зустрічається з доступністю

Строго кажучи, критерій 3.3.8 стосується кроків входу й автентифікації, а не контактних форм. Проте його ідея добре переноситься: введення спотворених літер, розв’язання суми чи вибір світлофорів у сітці зображень повністю виключають деяких людей. Варіанти, які зазвичай працюють без головоломок, — як-от Cloudflare Turnstile, Friendly Captcha, поле-пастка в поєднанні з перевіркою часу або серверна фільтрація на кшталт Akismet — стримують спам, не вимагаючи від відвідувачів нічого доводити. Поле-пастка зручне лише тоді, коли воно справді невидиме, також для програм читання з екрана й користувачів клавіатури:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Залиште це поле порожнім</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Перевірте власну форму за п’ятнадцять хвилин

1. 1Відкладіть мишу й заповніть усю форму лише клавіатурою. Чи можете Ви дістатися кожного поля й кнопки надсилання та чи завжди бачите, де перебуваєте?
2. 2Надішліть порожню форму, потім — із неправильною адресою електронної пошти. Чи з’являються помилки текстом поряд із потрібним полем і чи зрозуміло, що робити?
3. 3Відкрийте сторінку на телефоні або збільште масштаб браузера до 200%. Чи все читається, чи легко натискати кнопки та чи не перекриває банер cookie або віджет чату кнопку надсилання?
4. 4Увімкніть програму читання з екрана (VoiceOver, NVDA або TalkBack) і послухайте: чи оголошується кожне поле зі своїм підписом і чи мовчить поле-пастка?
5. 5Запустіть автоматизовану перевірку на кшталт axe-core. Вона швидко знаходить відсутні підписи й проблеми контрасту, але не все — наведені вище ручні кроки все ще потрібні.

Якщо Ви волієте почати з огляду, formexposed переглядає Ваші публічні форми ззовні, нічого не надсилаючи. Його перевірки доступності запускають axe-core на кожній формі, позначають CAPTCHA без доступної альтернативи й поля-пастки, які оголошують програми читання з екрана, та перевіряють форму на телефоні — цілі дотику, накладки над кнопкою надсилання, горизонтальне прокручування. Безкоштовна перевірка показує загальну категорію захисту; ці подробиці містить повний звіт. Це добра відправна точка для наведеного вище списку, а не заміна тестування зі справжніми людьми.