Атрибут accesskey тега <area>
Описание
Атрибут accesskey для тега <area> позволяет активировать область изображения-карты с помощью сочетания клавиш. Это улучшает доступность для пользователей клавиатурной навигации.
<img src="keyboard-nav.png" usemap="#keymap" alt="Клавиатурная навигация">
<map name="keymap">
<area shape="rect" coords="0,0,100,50"
href="#main"
accesskey="1"
alt="Главный контент [1]">
<area shape="rect" coords="100,0,200,50"
href="#search"
accesskey="2"
alt="Поиск [2]">
</map>
Особенности работы:
| Платформа | Сочетание клавиш |
|---|---|
| Windows/Linux | Alt + accesskey |
| Mac | Control + Option + accesskey |
| ChromeOS | Alt + accesskey |
Рекомендации по использованию:
- Используйте цифры (1-9) или буквы для простых комбинаций
- Избегайте конфликтов с системными сочетаниями клавиш
- Указывайте accesskey в тексте alt (например, "[1]")
- Ограничьте количество элементов с accesskey (3-5 на странице)
- Тестируйте в разных браузерах и ОС
Примеры хороших практик:
<map name="navmap">
<area shape="rect" coords="0,0,100,50"
href="#content"
accesskey="C"
alt="Основной контент [Alt+C]">
<area shape="rect" coords="100,0,200,50"
href="#footer"
accesskey="F"
alt="Футер [Alt+F]">
</map>
Ограничения и проблемы:
- Разные сочетания клавиш на разных платформах
- Возможные конфликты с горячими клавишами браузера
- Ограниченная поддержка на мобильных устройствах
- Пользователи могут не знать о наличии горячих клавиш
Альтернативные решения:
<script>
// Добавление клавиатурных обработчиков
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === '1') {
document.location.hash = '#main';
}
});
</script>
Важно: Хотя accesskey улучшает доступность, его реализация различается в браузерах. Всегда предоставляйте альтернативные способы навигации.
Примечание: Для сложных интерактивных карт рассмотрите использование WAI-ARIA ролей и JavaScript-обработчиков клавиатурных событий.