Атрибут tabindex тега <map>

Описание

Атрибут tabindex для тега <map> определяет порядок перехода между интерактивными элементами (областями <area>) с помощью клавиши Tab. Это полезно для улучшения доступности и управления фокусом.

Пример использования:
<img src="control-panel.jpg" alt="Панель управления" usemap="#panel"> <map id="panel" tabindex="0"> <area shape="rect" coords="0,0,100,50" alt="Кнопка 1" href="#btn1" tabindex="1"> <area shape="rect" coords="100,0,200,50" alt="Кнопка 2" href="#btn2" tabindex="2"> </map>

Значения атрибута:

Значение Поведение Рекомендация
tabindex="0" Элемент включается в естественный порядок перехода Для стандартной навигации
tabindex="-1" Элемент исключается из последовательности перехода Для программного управления фокусом
tabindex="1+" Определяет явный порядок перехода (1 → 2 → 3...) Используйте осторожно

Динамическое управление:

<img src="menu.png" alt="Меню" usemap="#nav-map"> <map id="nav-map"> <area shape="rect" coords="0,0,100,50" alt="Главная" href="#home" tabindex="1"> <area shape="rect" coords="100,0,200,50" alt="О нас" href="#about" tabindex="2"> </map> <button onclick="changeTabOrder()">Изменить порядок

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

  • Используйте tabindex="0" для естественного порядка навигации
  • Избегайте значений больше 0 - это может нарушить логику навигации
  • Тестируйте с клавиатурной навигацией
  • Убедитесь, что фокусируемые элементы имеют визуальное состояние focus

Пример с CSS для фокуса:

<style> area:focus { outline: 2px solid blue; } </style> <img src="interface.png" alt="Интерфейс" usemap="#ui-map"> <map id="ui-map"> <area shape="rect" coords="0,0,100,50" alt="Опция 1" href="#opt1" tabindex="0"> <area shape="rect" coords="100,0,200,50" alt="Опция 2" href="#opt2" tabindex="0"> </map>

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Поведение может отличаться в сложных интерактивных картах
  • Не заменяет семантически правильную HTML-разметку
  • Для сложных сценариев лучше использовать JavaScript

Примечание: Хотя атрибут tabindex можно применять к <map>, чаще его используют непосредственно для элементов <area>. Для сложных интерактивных изображений рассмотрите использование ARIA-атрибутов для улучшения доступности.