HTML-тег <area>

Характеристики

• Тип: медиа, строчный, статичный, семантический
• Назначение: Определяет активные области внутри карты-изображения, которые являются гиперссылками.
• Родители: Элемент <map>.
• Потомки: Не содержит содержимого (самозакрывающийся тег).
• Глобальные атрибуты: все, кроме contenteditable, contextmenu, dir, spellcheck
• Атрибуты событий: все

Атрибуты

• alt — Текстовое описание области (обязательно для доступности).
• coords — Координаты области в зависимости от значения shape.
• shape — Форма области (rect, circle, poly, default).
• href — URL ссылки, на которую ведет область.
• target — Указывает, где открыть связанный документ.
• download — Указывает, что ссылка ведет на скачивание.
• rel — Отношение между текущим документом и связанным.

Пример использования

<map name="image-map">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Ссылка 1">
  <area shape="circle" coords="337,300,44" href="link2.html" alt="Ссылка 2">
</map>

Использование в JavaScript

// Получение всех элементов <area>
const areas = document.querySelectorAll('area');

// Изменение ссылки первой области
areas[0].href = 'new-link.html';

Рекомендации по обеспечению доступности (a11y)

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

Полезные ссылки