Атрибут accesskey тега <div>
Описание
Атрибут accesskey позволяет активировать или фокусировать элемент <div> с помощью сочетания клавиш. Это полезно для быстрого доступа к важным разделам страницы.
<div accesskey="1" tabindex="0" style="padding:10px; border:1px solid #ccc; margin:5px;">
Нажмите Alt+1 (Windows) или Control+1 (Mac) для активации
</div>
<div accesskey="2" tabindex="0" class="focusable-div">
Блок с доступом по Alt+2
</div>
<style>
.focusable-div {
padding: 10px;
border: 1px solid #eee;
margin: 5px;
}
.focusable-div:focus {
outline: 2px solid blue;
background-color: #f0f8ff;
}
</style>
Сочетания клавиш по платформам:
| Платформа | Сочетание клавиш |
|---|---|
| Windows/Linux | Alt + accesskey |
| Mac | Control + Option + accesskey |
| Firefox (все платформы) | Alt + Shift + accesskey |
Рекомендации по использованию:
<!-- 1. Использование цифр -->
<div accesskey="1" tabindex="0">Главный раздел</div>
<!-- 2. Использование букв -->
<div accesskey="n" tabindex="0">Новости</div>
<!-- 3. Группа элементов -->
<div class="quick-access">
<div accesskey="p" tabindex="0">Профиль</div>
<div accesskey="s" tabindex="0">Настройки</div>
</div>
<style>
[accesskey]:focus {
background-color: #f0f0f0;
box-shadow: 0 0 0 2px #4a90e2;
}
</style>
Лучшие практики:
- Используйте цифры (1-9) для наиболее важных разделов
- Добавляйте
tabindex="0"для возможности фокусировки - Обеспечьте визуальную обратную связь при фокусе
- Избегайте конфликтов с сочетаниями клавиш браузера
- Документируйте горячие клавиши для пользователей
Ограничения и проблемы:
<div accesskey="f" tabindex="0">
Может конфликтовать с меню "Файл" в браузере
</div>
<script>
// Проверка поддержки и конфликтов
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === '1') {
console.log('Accesskey 1 activated');
}
});
</script>
Доступность:
- Убедитесь, что элемент может получать фокус
- Добавьте текстовое пояснение для сочетаний клавиш
- Проверьте работу с клавиатурными навигаторами
- Рассмотрите использование ARIA-ролей для сложных элементов
Примечание: Хотя accesskey может улучшить доступность, современные веб-приложения часто используют более сложные системы навигации с помощью JavaScript. Для сложных интерфейсов рассмотрите использование специализированных библиотек управления фокусом.