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

Описание

Атрибут accesskey для тега <map> позволяет назначить горячую клавишу для быстрого доступа к интерактивным областям карты изображения. Это глобальный атрибут HTML, который может применяться к элементам <area> внутри <map>.

Пример использования:
<img src="navigation.png" alt="Навигационное меню" usemap="#navmap"> <map name="navmap"> <area shape="rect" coords="0,0,100,50" href="home.html" alt="Главная" accesskey="1"> <area shape="rect" coords="100,0,200,50" href="products.html" alt="Продукты" accesskey="2"> </map> <p>Нажмите Alt+1 для перехода на главную, Alt+2 - к продуктам</p>

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

Браузер/ОС Комбинация клавиш Примечание
Windows (Chrome, Firefox) Alt + accesskey Требуется подтверждение в некоторых браузерах
MacOS Control + Option + accesskey Может конфликтовать с системными сочетаниями
Linux Alt + accesskey Аналогично Windows

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

  • Используйте цифры (1-9) или простые буквы
  • Избегайте конфликтов с системными комбинациями
  • Обеспечьте видимые подсказки для пользователей
  • Проверяйте работу в целевых браузерах
  • Для сложных карт лучше использовать JavaScript

Пример с подсказками:

<img src="services.png" alt="Услуги" usemap="#services"> <map name="services"> <area shape="rect" coords="0,0,100,50" href="design.html" alt="Дизайн (Alt+D)" accesskey="D"> <area shape="rect" coords="100,0,200,50" href="dev.html" alt="Разработка (Alt+R)" accesskey="R"> </map>

Ограничения и проблемы:

  • Не работает на мобильных устройствах
  • Разные комбинации в разных браузерах
  • Может конфликтовать с другими accesskey на странице
  • Ограниченная поддержка в современных веб-приложениях

Альтернатива с JavaScript:

<script> document.addEventListener('keydown', function(e) { if(e.altKey && e.key === '1') { document.querySelector('map[name="navmap"] area[href="home.html"]').click(); } }); </script>

Примечание: Хотя accesskey может улучшить доступность карт изображений, в современных веб-приложениях рекомендуется использовать семантическую HTML-разметку с JavaScript-управлением для более надежного и кросс-браузерного решения.