Атрибут title тега <area>
Описание
Атрибут title для тега <area> предоставляет вспомогательную текстовую подсказку, которая отображается при наведении курсора на область изображения-карты. Также используется программами чтения с экрана для доступности.
<img src="world-map.png" usemap="#geography" alt="Карта мира">
<map name="geography">
<area shape="rect" coords="0,0,100,50"
href="#europe"
title="Информация о европейских странах"
alt="Европа">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Отображение | Всплывающая подсказка при наведении (tooltip) |
| Доступность | Читается скринридерами как дополнительное описание |
| Форматирование | Только plain-текст (HTML-теги не интерпретируются) |
| Мобильные устройства | Может требовать длительного нажатия для отображения |
Рекомендации по использованию:
- Важно: Не заменяйте атрибут
alt- используйтеtitleкак дополнительную информацию - Держите текст кратким (рекомендуется 60-100 символов)
- Избегайте дублирования содержимого
alt - Для важной информации используйте видимый текст на изображении
- Тестируйте на различных устройствах
Пример хорошей практики:
<area shape="circle" coords="100,100,50"
href="#france"
alt="Франция"
title="Основные достопримечательности: Эйфелева башня, Лувр">
Сравнение с атрибутом alt:
| Атрибут | Назначение | Когда использовать |
|---|---|---|
alt |
Обязательное текстовое описание области | Всегда, для доступности и когда изображение не загружено |
title |
Дополнительная вспомогательная информация | Для уточняющих деталей, не содержащихся в alt |
Совет: Для сложных интерактивных карт рассмотрите использование SVG с элементами <title> вместо традиционных image maps.
Примечание: Хотя атрибут title улучшает пользовательский опыт, не полагайтесь на него как на единственный источник важной информации - многие мобильные устройства и некоторые программы чтения с экрана не отображают эти подсказки.