Доступные контактные формы и Европейский акт о доступности

Контактная форма часто является единственной дверью между посетителем и Вашим бизнесом. Если открыть её можно только мышью, хорошим зрением и терпением для размытой картинки-головоломки, некоторые люди просто остаются снаружи. С середины 2025 года для многих предприятий, продающих потребителям в ЕС, это уже не только вопрос удобства, но и правовой вопрос.

Что охватывает Европейский акт о доступности

Европейский акт о доступности (Директива (ЕС) 2019/882) применяется с 28 июня 2025 года. Он устанавливает требования доступности определённых продуктов и услуг для потребителей, включая электронную торговлю, банковские услуги потребителям, электронные книги, электронные коммуникации и часть пассажирских перевозок. Для сайта это означает интернет-магазин или банковский сервис в целом, включая формы связи, вопросов и жалоб клиентов. Микропредприятия, оказывающие услуги, освобождены: предприятия с числом сотрудников менее десяти и годовым оборотом или итогом баланса не более EUR 2 миллионов. Предложения исключительно для других предприятий обычно находятся вне сферы действия.

Каждое государство-член перенесло директиву в национальное право. В Германии это Barrierefreiheitsstärkungsgesetz (BFSG), в Польше — закон 2024 года об обеспечении соответствия определённых продуктов и услуг требованиям доступности. Надзорные органы и санкции различаются по странам, но технический критерий в целом одинаков: на практике европейский стандарт EN 301 549, который, в свою очередь, основан на Web Content Accessibility Guidelines (WCAG).

Почему это полезно даже без юридической обязанности

Возможно, Ваш бизнес освобождён или Вы обслуживаете только другие компании. Доступные формы всё равно полезны по простой причине: каждый сдавшийся на полпути — обращение, которого Вы никогда не получите. Исправления для пользователя программы экранного доступа помогают и тому, кто заполняет форму с телефона в поезде, на ярком солнце, со сломанным запястьем или на неродном языке. Ясные подписи и полезные сообщения об ошибках уменьшают число брошенных форм для всех — и ничто из этого не ослабляет защиту от спама.

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

• Видимые подписи, связанные с полями (1.3.1, 3.3.2): у каждого поля есть видимая подпись, связанная через for/id. Один placeholder не является подписью — он исчезает, как только человек начинает печатать.
• Сообщения об ошибках, объясняющие исправление (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 строго касается входа, но идея переносится сюда — головоломка вроде перепечатывания искажённых букв или решения суммы не должна быть единственным путём. Предложите альтернативу или метод совсем без головоломки.
• Honeypot скрыты от вспомогательных технологий: оболочка поля-ловушки получает aria-hidden="true", а поле — tabindex="-1", чтобы пользователи программ экранного доступа и клавиатуры никогда не попадали в него.

CAPTCHA и honeypot: где защита от спама встречается с доступностью

Строго говоря, критерий 3.3.8 касается шагов входа и аутентификации, а не контактных форм. Однако его идея хорошо переносится: ввод искажённых букв, решение суммы или выбор светофоров в сетке изображений полностью исключают некоторых людей. Варианты, обычно работающие без головоломок, — Cloudflare Turnstile, Friendly Captcha, honeypot с проверкой времени или серверная фильтрация вроде Akismet — не пропускают спам, не требуя от посетителей доказательств. Honeypot удобен только при настоящей невидимости, в том числе для программ экранного доступа и пользователей клавиатуры:

<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) и послушайте: каждое ли поле озвучивается с подписью и молчит ли honeypot?
5. 5Запустите автоматическую проверку, например axe-core. Она быстро находит отсутствующие подписи и проблемы контраста, но не всё — ручные шаги выше всё ещё нужны.

Если Вы предпочитаете начать с обзора, formexposed смотрит на публичные формы снаружи, ничего не отправляя. Проверки доступности запускают axe-core для каждой формы, отмечают CAPTCHA без доступной альтернативы и honeypot, озвучиваемые программами экранного доступа, и смотрят на форму с телефона: цели нажатий, перекрытия кнопки отправки, горизонтальная прокрутка. Бесплатная проверка показывает общий уровень; эти подробности находятся в полном отчёте. Это хорошая отправная точка для списка выше, а не замена тестированию с реальными людьми.