Веб-разработка: как добавить подсказку к полю формы без потери доступности

Чтобы добавить подсказку к полю формы без потери доступности, свяжите текст с полем программно через aria-describedby, разместите его рядом и не используйте вместо метки. Отдельно показывайте требования, ошибки и обязательность поля. Затем проверьте форму с клавиатурой и скринридером: подсказка должна быть доступна до ввода и не исчезать раньше времени.

Что важно сохранить, добавляя подсказку к полю

• Сначала определите, какую информацию пользователю нужно знать именно при заполнении поля.
• Оставьте видимую метку: подсказка не заменяет название поля.
• Свяжите подсказку с полем через aria-describedby, используя уникальный идентификатор.
• Не смешивайте постоянные инструкции, ошибки и обозначение обязательности.
• Проверьте доступность подсказки с клавиатуры и скринридером, а не только визуально.

Определите, какую задачу решает подсказка

Подсказка нужна, если без пояснения пользователь может неверно заполнить поле: например, указать дату в неподходящем формате или не понять, какие символы допустимы. Она подходит для инструкций, которые нужны до отправки формы.

Не добавляйте текст "на всякий случай", если метка и название поля уже однозначны. Не используйте подсказку вместо обязательной информации, которую пользователь должен увидеть до действия, или вместо сообщения об ошибке после проверки.

На этапе планирования проекта - будь то разработка сайта под ключ или веб-разработка на заказ - зафиксируйте требования к форме вместе с содержанием полей и сценариями ошибок. Это помогает оценить создание сайта и цену изменений до того, как подсказки будут встроены в интерфейс.

Свяжите текст подсказки с полем через HTML

Для базовой реализации нужны доступ к HTML формы, уникальный идентификатор подсказки и средство проверить результат в браузере. Если форма формируется CMS или библиотекой компонентов, убедитесь, что разметку можно изменить и что динамические идентификаторы не повторяются.

Сначала сохраните текущую версию страницы или внесите изменение на тестовой среде. Пример семантической связки:

Электронная почта

<p id="email-hint">Укажите адрес, к которому у вас есть доступ.</p>

Атрибут aria-describedby ссылается на элемент подсказки по его id. Для нескольких пояснений перечислите идентификаторы через пробел. Не присваивайте одинаковый id разным элементам.

Разведите подсказки, ошибки и обязательность поля

Перед изменением проверьте риски и ограничения:

• Скринридер может объявлять связанный текст при фокусе на поле; длинные повторяющиеся инструкции усложняют восприятие.
• Подсказка, появляющаяся только при наведении, недоступна части пользователей и на устройствах без указателя.
• Если ошибка подменяет постоянную подсказку, пользователь может потерять полезные инструкции.
• Автоматически скрывающийся текст может исчезнуть до того, как его прочитают.

1. Оставьте понятную метку. Свяжите элемент с полем через совпадающие значения for и id. Метка называет поле, а подсказка уточняет формат или порядок заполнения.
2. Добавьте постоянную подсказку. Разместите пояснение рядом с полем и укажите его идентификатор в aria-describedby. Убедитесь, что текст остаётся доступным, когда поле получает фокус.
3. Обозначьте обязательность явно. Если поле обязательно, сообщите об этом текстом или понятным общим правилом формы. Атрибут required помогает браузеру определить обязательное поле, но сам по себе не заменяет понятное объяснение для пользователя.
4. Показывайте ошибку отдельно. После проверки выведите конкретное сообщение и обозначьте поле как ошибочное, например с помощью aria-invalid="true". Свяжите ошибку с полем через aria-describedby, сохранив ссылку и на постоянную подсказку, если обе важны.
5. Проверьте повторную отправку. После исправления значения обновите состояние ошибки: уберите сообщение и сбросьте aria-invalid, когда поле больше не считается ошибочным.

Если ошибка появляется динамически, проверьте, получает ли пользователь информацию о ней без необходимости самостоятельно искать её в форме. Поведение зависит от реализации и скринридера, поэтому проверка на реальной странице обязательна.

Покажите подсказку так, чтобы её заметили

После добавления разметки проверьте результат по списку:

• Подсказка расположена рядом с соответствующим полем и визуально с ним связана.
• Текст читаем и не отличается от фона только слабым цветовым контрастом.
• Пояснение не передаётся исключительно цветом, значком или наведением.
• Метка поля остаётся видимой и понятной при пустом и заполненном значении.
• При увеличении масштаба страницы текст не перекрывается и не обрезается.
• На узком экране подсказка не уходит далеко от поля и не закрывается соседними элементами.
• Инструкция остаётся доступной при переходе к полю и не исчезает сразу после фокуса.
• Текст ошибки отличается от постоянной подсказки и сообщает, как исправить значение.

Если форма критична для оформления заказа, регистрации или получения услуги, включите её в аудит доступности сайта. Для проекта, где требуется разработка форм для сайта, заранее предусмотрите проверку состояний поля, адаптивной вёрстки и объявлений скринридера.

Проверьте поведение с клавиатурой и скринридером

Частые ошибки, которые стоит исключить во время проверки:

• Подсказка существует только во всплывающем окне при наведении или нажатии на значок.
• У поля нет программно связанной метки, а роль метки выполняет только подсказка.
• Значение aria-describedby указывает на отсутствующий или повторяющийся идентификатор.
• Одна и та же длинная инструкция объявляется для нескольких полей без необходимости.
• Сообщение об ошибке визуально видно, но не связано с полем.
• После исправления значения поле остаётся помеченным как ошибочное.
• Фокус перемещается к подсказке и нарушает обычный порядок перехода клавишей Tab.
• Пояснение скрыто от вспомогательных технологий стилями или атрибутом aria-hidden="true".

Пройдите форму клавишей Tab и проверьте, что фокус виден, порядок логичен, а текст инструкции доступен при переходе к полю. Затем протестируйте форму со скринридером: убедитесь, что объявляются название поля, его состояние и необходимые пояснения без лишних повторов.

Избегайте паттернов, которые скрывают важный текст

• Постоянное пояснение рядом с полем. Используйте его для коротких требований к формату, примера допустимого значения или важного ограничения.
• Общее объяснение перед группой полей. Подходит, если инструкция относится ко всей группе; при необходимости свяжите её с каждым соответствующим полем.
• Дополнительная информация по отдельной ссылке. Уместна для длинных правил или подробной справки, если ссылка имеет понятное название и пользователь может открыть материал с клавиатуры.
• Сворачиваемый блок с пояснениями. Используйте только для необязательной дополнительной информации. Критичные инструкции должны быть видны до заполнения и отправки формы.

Выбирайте вариант по важности текста: обязательные требования не прячьте, а расширенные пояснения отделяйте от краткой инструкции рядом с полем.

Практические нюансы подсказок в формах

Можно ли использовать placeholder вместо подсказки?

Не стоит заменять им метку или важную инструкцию: placeholder может исчезнуть при вводе и хуже различаться визуально. Используйте его только как дополнительный пример, если он действительно помогает.

Нужно ли добавлять подсказку в порядок Tab?

Обычно нет: статический текст не должен становиться отдельной остановкой клавиатурной навигации. Пользователь должен получить его через связь с полем, например с помощью aria-describedby.

Как связать поле и сообщение об ошибке?

Добавьте текст ошибки в aria-describedby вместе с идентификатором постоянной подсказки, если она всё ещё нужна. Установите aria-invalid="true" только для поля, которое действительно находится в ошибочном состоянии.

Можно ли показывать подсказку только при фокусе?

Для важной инструкции это рискованно: пользователь может не заметить её или не получить доступ на сенсорном устройстве. Предпочтительно оставить краткое пояснение видимым рядом с полем.

Нужно ли добавлять aria-describedby, если текст и так стоит рядом?

Визуальная близость не всегда означает программную связь. Если пояснение важно для заполнения поля, явная связь помогает вспомогательным технологиям определить, к какому полю относится текст.

Как проверить подсказку без скринридера?

Пройдите форму клавиатурой, проверьте видимость фокуса и состояние поля после ошибки и исправления. Такая проверка полезна, но не заменяет тестирование со скринридером.

Что делать, если подсказка слишком длинная?

Сократите текст до инструкции, необходимой в момент заполнения, а подробные правила вынесите в доступный справочный материал. Не скрывайте критичные условия в сворачиваемом блоке.

Автор: Наталья Орлова.