Атрибут accesskey тега <article>
Описание
Атрибут accesskey для тега <article> позволяет назначить сочетание клавиш для быстрого перехода к статье. Это улучшает доступность для пользователей, которые полагаются на клавиатурную навигацию.
<article accesskey="a" id="main-article">
<h2>Важная статья</h2>
<p>Содержание статьи...</p>
</article>
Особенности работы:
| Платформа | Сочетание клавиш |
|---|---|
| Windows/Linux | Alt + accesskey |
| Mac | Control + Option + accesskey |
| ChromeOS | Alt + accesskey |
Рекомендации по использованию:
- Важно: Используйте буквы или цифры (a-z, 0-9)
- Избегайте конфликтов с системными сочетаниями клавиш
- Указывайте назначенные клавиши в видимом тексте
- Ограничьте количество элементов с accesskey (3-5 на странице)
- Тестируйте в разных браузерах
Пример с видимой подсказкой:
<article accesskey="m" id="main-content">
<h2>[M] Основное содержание</h2>
<p>Нажмите Alt+M для быстрого доступа к этой статье</p>
</article>
Ограничения и проблемы:
- Разные сочетания клавиш на разных платформах
- Возможные конфликты с горячими клавишами браузера
- Ограниченная поддержка на мобильных устройствах
- Пользователи могут не знать о назначенных клавишах
Альтернативные решения:
<script>
// Добавление клавиатурных обработчиков
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === 'm') {
document.getElementById('main-article').scrollIntoView();
}
});
</script>
Важно: Хотя accesskey улучшает доступность, его реализация различается в браузерах. Всегда предоставляйте альтернативные способы навигации.
Совет: Для сложных статей рассмотрите использование WAI-ARIA landmarks и JavaScript-обработчиков клавиатурных событий.
Примечание: В HTML5 атрибут accesskey поддерживается для всех элементов, но наиболее полезен для основных структурных элементов, таких как <article>.