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

Описание

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

Пример использования:
<picture title="Фотография пляжа в летний сезон"> <source media="(min-width: 800px)" srcset="beach-large.jpg"> <img src="beach-small.jpg" alt="Пляж с пальмами"> </picture>

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

Платформа Поведение
Десктопные браузеры Подсказка появляется при наведении (после небольшой задержки)
Мобильные устройства Часто не отображается (нет события hover)

Разница с атрибутом alt:

  • alt - обязательный атрибут для доступности и замещающий текст
  • title - дополнительная информация, не обязательная для понимания
  • При отсутствии изображения показывается только alt

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

  • Используйте для пояснения, а не дублирования информации
  • Держите текст кратким (1-2 предложения)
  • Не заменяйте им обязательный alt у изображения
  • Избегайте важной информации только в title

Пример с форматированием:

<picture title="Автор: Иван Петров Дата съемки: 15.07.2022 Лицензия: CC BY-SA"> <img src="landscape.jpg" alt="Горный пейзаж"> </picture>

Советы для доступности:

  • Дублируйте важную информацию из title в видимом тексте
  • Для сложных описаний используйте aria-describedby
  • Помните, что скринридеры могут не читать title по умолчанию

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

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

Примечание: Для создания стилизованных и более функциональных подсказок рассмотрите использование CSS-решений (псевдоэлементы) или JavaScript-библиотек (tippy.js, popper.js), которые обеспечивают лучший контроль над отображением и позиционированием.