Атрибут alt тега <area>

Описание

Атрибут alt для тега <area> предоставляет альтернативный текст для области изображения-карты (image map). Этот текст отображается, если изображение не может быть загружено, и используется программами чтения с экрана для доступности.

Пример использования:
<img src="worldmap.png" usemap="#worldmap" alt="Карта мира"> <map name="worldmap"> <area shape="rect" coords="34,44,270,350" href="europe.html" alt="Европа - кликните для подробностей"> <area shape="circle" coords="450,200,50" href="africa.html" alt="Африка - информация о континенте"> </map>

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

Характеристика Поведение
Обязательность Обязателен, если href указан (для доступности)
Доступность Читается скринридерами вместо графической области
Отображение Показывается при наведении в некоторых браузерах
Длина текста Рекомендуется 5-15 слов (кратко и информативно)
Спецификация HTML5 (обязателен для соответствия стандартам)

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

  • Всегда указывайте для кликабельных областей
  • Описывайте назначение области, а не её внешний вид
  • Для нефункциональных областей используйте alt=""
  • Избегайте слов "кликните здесь" или "ссылка на"
  • Сочетайте с атрибутом title для дополнительной информации
  • Проверяйте с помощью валидаторов HTML

Примеры хороших и плохих практик:

<!-- Хорошо: информативно и кратко --> <area shape="rect" coords="0,0,100,100" href="products.html" alt="Каталог продукции"> <!-- Плохо: избыточно или недостаточно --> <area shape="circle" coords="200,200,50" href="about.html" alt="Круглая кнопка"> <area shape="poly" coords="10,20,30,40" href="contact.html" alt="">

Совместимость с ARIA:

<area shape="rect" coords="0,0,50,50" href="#main" alt="Перейти к основному содержанию" aria-label="Кнопка перехода к контенту">

Важные замечания:

  • Атрибут alt не заменяет подпись к изображению-карте
  • Для сложных image maps предусмотрите текстовую альтернативу
  • Проверяйте доступность с помощью скринридеров
  • Избегайте использования image maps для критической навигации

Примечание: Правильное использование атрибута alt для <area> является важной частью создания доступных веб-интерфейсов и соответствует требованиям WCAG 2.1.