Атрибут title тега <img>
Описание
Атрибут title добавляет всплывающую подсказку (tooltip) к элементу <img>, которая появляется при наведении курсора. В отличие от alt, этот атрибут предназначен для дополнительной информации, а не для доступности.
<img
src="chart.png"
alt="График продаж за 2023 год"
title="Кликните для увеличения графика"
width="600">
Различия между title и alt:
| Атрибут | Назначение | Когда использовать |
|---|---|---|
alt |
Альтернативный текст для доступности | Обязателен для всех изображений |
title |
Дополнительная информация | Для вспомогательных подсказок |
Правильное использование:
<!-- Хороший пример -->
<img
src="icon-info.png"
alt="Информация"
title="Подробнее о наших услугах"
width="20">
<!-- Плохой пример (дублирование alt и title) -->
<img
src="product.jpg"
alt="Красный велосипед"
title="Красный велосипед"
width="300">
Доступность и особенности:
- Не заменяет атрибут
alt(требуется для валидации HTML) - На мобильных устройствах подсказки могут не отображаться
- Некоторые скринридеры могут озвучивать содержимое title
- Избегайте избыточного текста (короткие и информативные подсказки)
Ограничения и совместимость:
- Поддерживается всеми браузерами на desktop
- На мобильных устройствах поведение может отличаться
- Время появления подсказки зависит от браузера
- Не поддерживает сложное форматирование
Примечание: Хотя атрибут title может быть полезен для дополнительных пояснений, не полагайтесь на него как на основной источник важной информации. Для критически важного контента используйте видимые текстовые элементы.