Атрибут accesskey тега <main>
Описание
Атрибут accesskey позволяет назначить горячую клавишу для быстрого доступа к элементу <main>. При нажатии комбинации клавиш (зависит от браузера и ОС) фокус перемещается на основной контент страницы.
<main accesskey="1" id="main-content" tabindex="-1">
<h1>Основное содержимое страницы</h1>
<!-- Контент -->
</main>
<script>
document.addEventListener('keydown', function(e) {
if(e.altKey && e.key === '1') {
document.getElementById('main-content').focus();
}
});
</script>
Особенности работы:
| Браузер/ОС | Комбинация клавиш |
|---|---|
| Chrome (Windows) | Alt + accesskey |
| Firefox (Windows) | Alt + Shift + accesskey |
| MacOS | Control + Option + accesskey |
Рекомендации по использованию:
- Используйте цифры (1-9) или буквы для accesskey
- Добавьте
tabindex="-1"чтобы сделать элемент фокусируемым - Избегайте конфликтов с системными комбинациями клавиш
- Сообщите пользователям о доступных горячих клавишах
- Для сложного поведения добавьте JavaScript-обработчик
Пример с подсказкой для пользователей:
<main accesskey="1" id="main-content" tabindex="-1">
<div class="accesskey-hint">Нажмите Alt+1 для перехода к содержимому</div>
<!-- Контент -->
</main>
<style>
.accesskey-hint {
position: absolute;
left: -9999px;
}
.accesskey-hint:focus-within {
left: 0;
background: yellow;
padding: 5px;
}
</style>
Ограничения:
- Разные комбинации клавиш в разных браузерах
- Возможны конфликты с системными сочетаниями
- Плохая поддержка на мобильных устройствах
- Не заменяет правильную семантическую структуру
Примечание: Хотя accesskey может улучшить доступность, для полноценной навигации рекомендуется использовать семантическую разметку, ARIA-роли и клавиатурные обработчики на JavaScript.