Атрибут title тега <fieldset>

Описание

Атрибут title в теге <fieldset> добавляет всплывающую подсказку, которая появляется при наведении курсора на группу полей формы. Это важный атрибут доступности, помогающий пользователям понять назначение группы полей.

Пример использования:
<form> <fieldset title="Основная контактная информация: имя, телефон и email"> <legend>Контактные данные</legend> <!-- Поля формы --> </fieldset> </form>

Основные сценарии применения:

Ситуация Пример title Назначение
Сложные группы полей "Адрес доставки: укажите точный адрес для курьера" Пояснение назначения группы
Технические требования "Пароль должен содержать 8+ символов, цифры и спецзнаки" Дополнительные инструкции
Условные поля "Заполняется только при выборе оплаты картой" Пояснение условий

Рекомендации по составлению подсказок:

  • Будьте краткими (60-120 символов)
  • Используйте понятный язык без жаргона
  • Указывайте важные требования
  • Избегайте дублирования текста из legend
  • Для длинных пояснений используйте дополнительный текст под полями

Пример с улучшенной доступностью:

<fieldset title="Платежные реквизиты: номер карты, срок действия и CVV-код" aria-describedby="payment-help"> <legend>Платежная информация</legend> <div id="payment-help" class="sr-only"> Безопасность: мы не храним данные вашей карты </div> <!-- Поля платежа --> </fieldset>

Особенности работы:

  • Подсказка появляется после задержки (зависит от браузера)
  • На мобильных устройствах может не отображаться
  • Используется скринридерами для озвучивания
  • Не заменяет семантическую разметку и label

Ограничения:

  • Не поддерживает форматирование текста
  • Нельзя стилизовать внешний вид подсказки
  • В некоторых браузерах ограничена длина текста
  • Не заменяет валидацию полей

Примечание: Хотя атрибут title полезен для быстрых подсказок, для важной информации лучше использовать видимые текстовые пояснения. Сочетайте его с другими методами улучшения доступности, такими как aria-label и aria-describedby.