Атрибут accesskey тега <nav>
Описание
Атрибут accesskey позволяет назначить горячую клавишу для быстрого перехода к навигационному блоку <nav>. Это особенно полезно для пользователей, которые предпочитают клавиатурную навигацию.
<nav accesskey="N">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</nav>
<p>Нажмите Alt+N (Windows) или Control+Option+N (Mac) для быстрого доступа к меню</p>
Сочетания клавиш по платформам:
| Платформа | Комбинация |
|---|---|
| Windows/Linux | Alt + ключ |
| macOS | Control + Option + ключ |
| ChromeOS | Alt + ключ |
Пример с JavaScript-обработкой:
<nav id="main-nav" accesskey="M">
<!-- Навигационные ссылки -->
</nav>
<script>
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key.toLowerCase() === 'm') {
document.getElementById('main-nav').focus();
console.log('Навигация активирована через accesskey');
}
});
</script>
Рекомендации по использованию:
- Используйте уникальные клавиши для разных элементов на странице
- Избегайте конфликтов с системными сочетаниями клавиш (S, F, E и др.)
- Всегда указывайте подсказку о доступной горячей клавише
- Для сложных интерфейсов создайте страницу справки по клавишам
- Рассмотрите использование цифр (1-9) для основных разделов
Пример с несколькими навигационными блоками:
<nav accesskey="1">
<h3>Основное меню (Alt+1)</h3>
<!-- Ссылки -->
</nav>
<nav accesskey="2">
<h3>Быстрые ссылки (Alt+2)</h3>
<!-- Ссылки -->
</nav>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Фактическое сочетание клавиш может отличаться в разных браузерах
- На мобильных устройствах может не работать
- Может конфликтовать с сочетаниями клавиш браузера
- Не заменяет полноценную клавиатурную навигацию по странице
Примечание: Хотя атрибут accesskey может улучшить доступность навигации, современные веб-приложения чаще используют сложные системы клавиатурных сокращений через JavaScript. Для навигационных меню особенно важно обеспечить последовательную клавиатурную навигацию с помощью Tab и стрелок.