Доступность форм: метки, ошибки, подсказки

Доступность формы — это не отдельная фишка для скринридеров. Это про то, чтобы любой человек на любом устройстве за разумное время понял, какие поля нужны, как их заполнить и что делать, если что-то пошло не так. Удачно, что именно эти правки одновременно поднимают и общую конверсию формы.

01Видимая подпись у каждого поля

Главное правило: у каждого input должна быть подпись label, которая связана с ним атрибутом for. Никакого «плейсхолдер вместо лейбла» — как только пользователь начинает вводить значение, подсказка исчезает, и человек забывает, какое поле перед ним.

Подпись должна быть видна всегда, читаться скринридером и кликаться: тап по слову «Телефон» должен ставить фокус в поле. Это особенно важно на мобильных, где промахнуться по узкому полю легко.

Что часто делают не так

• Используют плейсхолдер вместо label.
• Ставят подпись справа от поля — глаз ищет слева.
• Делают подпись светло-серой ниже порога контраста.
• Подписи в виде иконок без текстового аналога.

02Логика плейсхолдера и подсказки

Плейсхолдер — это пример формата, а не подпись. В поле «Телефон» уместен пример «+7 985 000 00 00», в поле «E-mail» — «vasya@company.ru». Если же требуется длинное пояснение («введите ИНН организации, 10 или 12 цифр»), его выносят отдельным текстом-подсказкой под полем и связывают с input через атрибут aria-describedby.

Такая подсказка не исчезает при наборе, читается скринридером и доступна по клавиатуре. Это особенно ценно в формах для бухгалтерии, регистрации компаний, медицинских и юридических услугах, где формат ввода строгий.

03Понятные сообщения об ошибках

«Поле заполнено неверно» — самое бесполезное сообщение в мире. Доступная форма объясняет, ЧТО не так и КАК это исправить.

• Конкретика. Не «введите корректный e-mail», а «адрес должен содержать символ @».
• Близость. Сообщение появляется рядом с проблемным полем, а не одним списком наверху формы.
• Цвет плюс иконка. Красная рамка отдельно не работает для людей с цветовой слепотой — добавляйте иконку или текстовую пометку «Ошибка».
• Фокус. После неуспешной отправки курсор переходит на первое проблемное поле.
• ARIA-live. Сообщение об общей ошибке формы должно объявляться скринридером — для этого используют атрибуты role=”alert” или aria-live=”polite”.

Эти же приёмы помогают всем пользователям, не только людям со специальными потребностями. Подробнее о компоновке форм — в материале формы обратной связи.

04Клавиатура и фокус

Запустите форму и попробуйте заполнить её, не касаясь мыши. По Tab курсор должен пройти все поля в логическом порядке: имя → телефон → e-mail → сообщение → согласие → кнопка «Отправить».

Что проверить:

• Фокус видно — пользователь понимает, где находится курсор.
• Кастомные чекбоксы и переключатели реагируют на пробел и Enter.
• Выпадающие списки открываются с клавиатуры.
• Модальные окна не «ловят» фокус: Esc их закрывает.
• Загрузчик файлов имеет понятную текстовую подпись.

Если вы не проверили форму с клавиатуры, считайте, что не проверили её совсем.

05Согласие на обработку данных

Чекбокс «Я согласен с обработкой персональных данных» — обязательный элемент по 152-ФЗ. С точки зрения доступности у него есть свои правила:

• Сам чекбокс должен быть фокусируемым и переключаться пробелом.
• Текст согласия — это label, связанный с input. Клик по тексту должен переключать состояние.
• Ссылка на политику открывается в новом окне с пометкой об этом.
• Если чекбокс не отмечен, ошибка появляется рядом, а не в скрытом всплывающем окне.

06Подтверждение успешной отправки

Отдельный пункт, который многие забывают. После отправки заявки должно быть чётко понятно: «всё получилось, мы вам перезвоним». Для скринридеров это сообщение оформляют контейнером с role=”status” или aria-live=”polite” — иначе незрячий пользователь не поймёт, что произошло.

Доступная форма — это форма, которую можно заполнить с закрытыми глазами. И с закрытым кошельком: пользователь не должен платить за визуальную «красоту» интерфейса временем и нервами.

07Что проверить перед запуском

Короткий чек-лист, который можно прогнать за полчаса перед публикацией формы.

• У каждого поля есть видимая подпись label.
• Плейсхолдеры — это примеры, а не лейблы.
• Контраст текста, подписей и плейсхолдеров проходит порог 4,5:1.
• Ошибки конкретны и появляются рядом с проблемным полем.
• Форму можно пройти с клавиатуры от первого поля до отправки.
• Видимый фокус виден на всех элементах.
• После отправки появляется понятное сообщение об успехе или ошибке.

Если ваш сайт собирает много форм и вы планируете обновление сайта или редизайн, заложите этот чек-лист в техзадание сразу — переделывать формы поштучно дольше и дороже.

Официальная документация по теме — Справка Яндекс.Вебмастера.