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

Описание

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

  • Дополнительного описания графического контента
  • Пояснения технических деталей
  • Указания авторства или источника
  • Улучшения доступности
Пример использования:
<figure title="Данные за 2025 год, источник: отдел аналитики"> <img src="annual-report.png" alt="Годовой отчет"> <figcaption>Рисунок 1. Финансовые показатели</figcaption> </figure>

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

Тип информации Пример Когда использовать
Метаданные "Источник: Национальное статистическое бюро" Для указания происхождения данных
Технические детали "Масштаб: 1:50000, съемка 2024г." Для специализированного контента
Авторские права "© Фото: Иванов А.П., 2025" Для защиты авторства

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

<figure title="Интерактивная карта (используйте Tab для навигации)" aria-describedby="map-desc"> <img src="interactive-map.png" alt="Карта регионов"> <figcaption>Карта 2. Географическое распределение</figcaption> <span id="map-desc" class="sr-only">Данные обновлены 15.11.2025</span> </figure>

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

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

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

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

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

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

Примечание: Для важной информации, которая должна быть всегда доступна, предпочтительнее использовать видимые текстовые пояснения внутри <figcaption> или рядом с элементом.