Подсказка поля через aria-describedby

Назначение

Постоянная подсказка помогает заполнить поле и должна быть программно связана с ним, если важна для понимания ввода.

Как это работает

aria-describedby ссылается на id пояснения, а label даёт основное имя. При нескольких пояснениях идентификаторы перечисляют через пробел. Подсказка не должна повторять всю подпись без дополнительной пользы.

Пример

<label for="slug-field">Адрес статьи</label>
<input id="slug-field" name="slug" aria-describedby="slug-help">
<p id="slug-help">Используйте короткие слова через дефис, например css-grid. Окончательный адрес проверит сервер.</p>

Что должно получиться

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

Граница применения и частая ошибка

Не помещайте обязательные требования только в placeholder. После ввода они исчезнут; также проверяйте, что id описания уникален и действительно присутствует.

Самостоятельная проверка

Введите значение, чтобы убедиться, что пояснение остаётся видимым. Проверьте доступное описание поля и измените текст подсказки без изменения связи.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• CSS Grid
• Flexbox
• Адаптивная проверка