Атрибут accesskey тега <li>
Описание
Атрибут accesskey позволяет назначить горячую клавишу для быстрого доступа к элементу списка <li>. Это улучшает доступность и удобство навигации по странице с клавиатуры.
<ul>
<li accesskey="1"><a href="#section1">Раздел 1</a></li>
<li accesskey="2"><a href="#section2">Раздел 2</a></li>
<li accesskey="3"><a href="#section3">Раздел 3</a></li>
</ul>
Особенности работы:
| Платформа | Комбинация клавиш | Пример |
|---|---|---|
| Windows | Alt + accesskey | Alt+1 для первого пункта |
| Mac | Control + Option + accesskey | Ctrl+Option+1 |
| Linux | Alt + accesskey | Alt+1 |
Пример с визуальным обозначением:
<style>
.access-key {
text-decoration: underline;
font-weight: bold;
}
</style>
<ul>
<li accesskey="n">
<a href="/news"><span class="access-key">N</span>овости</a>
</li>
<li accesskey="a">
<a href="/about"><span class="access-key">A</span>бo нас</a>
</li>
</ul>
Рекомендации:
- Используйте первую букву пункта (N для "Новости")
- Избегайте конфликтов с системными комбинациями
- Ограничьте количество горячих клавиш (3-5 на страницу)
- Добавляйте визуальные подсказки
- Тестируйте в разных браузерах
Пример с JavaScript обработкой:
<ul id="nav-menu">
<li accesskey="h"><a href="/home">Главная</a></li>
<li accesskey="c"><a href="/contacts">Контакты</a></li>
</ul>
<script>
document.addEventListener('keydown', function(e) {
if(e.altKey && e.key === 'h') {
e.preventDefault();
window.location.href = '/home';
}
});
</script>
Ограничения:
- Разные браузеры используют разные комбинации
- Ограниченная поддержка на мобильных устройствах
- Может конфликтовать с сочетаниями клавиш браузера
- Неочевидно для пользователей без подсказок
Пример в навигационном меню:
<nav>
<ul>
<li accesskey="1" title="Alt+1"><a href="#products">Продукты</a></li>
<li accesskey="2" title="Alt+2"><a href="#services">Услуги</a></li>
<li accesskey="3" title="Alt+3"><a href="#contacts">Контакты</a></li>
</ul>
</nav>
Примечание: Хотя атрибут accesskey может улучшить доступность, в современных веб-приложениях чаще используют кастомные JavaScript-решения для обработки горячих клавиш, обеспечивая более предсказуемое поведение.