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

Описание

Атрибут title в теге <figcaption> добавляет всплывающую подсказку (tooltip), которая появляется при наведении курсора на подпись. Это полезно для:

  • Дополнительного описания подписи
  • Пояснения терминов или сокращений
  • Улучшения доступности
Пример использования:
<figure> <img src="chart.png" alt="Статистика продаж"> <figcaption title="Данные за 2025 год, включая все регионы"> Рисунок 1. Динамика продаж (Q1-Q4) </figcaption> </figure>

Рекомендации по содержимому:

Тип информации Пример Когда использовать
Дополнительные детали "Данные собраны в период с января по март 2025" Когда в основном тексте нет места
Пояснение терминов "Q1 - первый квартал (январь-март)" Для специализированных сокращений
Технические примечания "Методология: опрос 1000 респондентов" Для указания источников данных

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

<figure> <img src="map.png" alt="Карта покрытия"> <figcaption title="Зоны покрытия 5G (актуально на июнь 2025)" aria-describedby="coverage-desc"> Рисунок 2. Карта покрытия сети <span id="coverage-desc" class="sr-only">Данные обновлены 15.06.2025</span> </figcaption> </figure>

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

  • Подсказка появляется после небольшой задержки
  • На мобильных устройствах может не отображаться
  • Максимальная длина зависит от браузера
  • Не поддерживает HTML-форматирование

Советы по использованию:

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

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

  • Не заменяет атрибут alt для изображений
  • Ограниченные возможности стилизации
  • Ненадежный механизм отображения
  • Не все скринридеры озвучивают содержимое

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