Атрибут accesskey тега <aside>
Описание
Атрибут accesskey позволяет назначить клавишу быстрого доступа (горячую клавишу) для элемента <aside>. При нажатии комбинации клавиш (обычно Alt + ключ в Windows, Control + ключ в Mac) фокус перемещается на этот элемент.
<aside accesskey="s" tabindex="0">
<h3>Боковая панель (Alt+S)</h3>
<p>Это дополнительная информация, доступная по горячей клавише.</p>
</aside>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Формат значения | Один символ (буква, цифра или знак) |
| Комбинации клавиш | Зависит от ОС и браузера (Alt/Control + ключ) |
| Доступность | Может конфликтовать с системными сочетаниями |
| Поддержка | Все основные браузеры |
Рекомендации по использованию:
- Используйте
tabindex="0"вместе с accesskey для неинтерактивных элементов - Выбирайте мнемонические клавиши (первая буква функции)
- Избегайте конфликтов с браузерными и системными сочетаниями
- Документируйте назначенные клавиши в интерфейсе
- Учитывайте международные раскладки клавиатуры
Пример с несколькими accesskey:
<aside accesskey="n" tabindex="0">
<h3>Уведомления (Alt+N)</h3>
<p>Здесь отображаются последние уведомления.</p>
</aside>
<aside accesskey="h" tabindex="0">
<h3>Справка (Alt+H)</h3>
<p>Раздел помощи и подсказок.</p>
</aside>
Ограничения: В разных браузерах и операционных системах могут использоваться разные модификаторы для accesskey (Alt, Control, Alt+Shift). Всегда тестируйте на целевых платформах.
Поддержка браузерами:
| Браузер | Комбинация Windows/Linux | Комбинация Mac |
|---|---|---|
| Chrome | Alt + ключ | Control + Option + ключ |
| Firefox | Alt + Shift + ключ | Control + Option + ключ |
| Safari | Alt + ключ | Control + Option + ключ |
| Edge | Alt + ключ | Control + Option + ключ |
Лучшие практики:
<style>
aside:focus {
outline: 3px solid #4d90fe;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
.accesskey-hint::after {
content: " [" attr(accesskey) "]";
font-size: 0.8em;
color: #666;
}
</style>
<aside accesskey="q" tabindex="0" class="accesskey-hint">
<h3>Быстрые ссылки</h3>
<p>Часто используемые ресурсы.</p>
</aside>
Совет: Для улучшения пользовательского опыта отображайте назначенные клавиши в интерфейсе, как показано в примере выше с CSS-псевдоэлементом.
Альтернативы для современного веба:
- Собственные JavaScript-решения для обработки клавиатурных событий
- ARIA-роли и кастомные элементы управления
- Фреймворки, предоставляющие компоненты с клавиатурной навигацией
JavaScript-реализация:
<aside id="custom-aside" tabindex="0">
<h3>Кастомное управление (Ctrl+Shift+S)</h3>
<p>Пример реализации через JavaScript.</p>
</aside>
<script>
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey && e.key === 'S') {
e.preventDefault();
document.getElementById('custom-aside').focus();
}
});
</script>
Примечание: Хотя атрибут accesskey является частью стандарта HTML5, его использование сокращается в пользу более гибких JavaScript-решений, особенно в сложных веб-приложениях.