HTML-тег <map>

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

• Тип: блочный, статичный, семантический
• Назначение: Определяет карту-изображение, которая связывает области изображения с гиперссылками.
• Родители: Любые HTML-теги, которые могут содержать встроенный контент.
• Потомки: Элементы <area>.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• name — Уникальное имя карты, используемое для связывания с атрибутом usemap в изображении.

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

<img src="image-map.jpg" alt="Карта" usemap="#image-map">
<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

// Получение элемента <map>
const mapElement = document.querySelector('map');

// Добавление новой области
const newArea = document.createElement('area');
newArea.shape = 'rect';
newArea.coords = '100,100,200,200';
newArea.href = 'link3.html';
newArea.alt = 'Ссылка 3';
mapElement.appendChild(newArea);

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

• Всегда используйте атрибут alt для элементов <area>, чтобы описать ссылки.
• Обеспечьте, чтобы области были достаточно большими для удобного взаимодействия.
• Убедитесь, что порядок табуляции логичен и последовательный.
• Отсутствие альтернативного текста в <area> снижает доступность для пользователей экранных читалок.
• Маленькие или плотно расположенные области могут затруднить взаимодействие.

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