Атрибут accesskey тега <img>
Описание
Атрибут accesskey позволяет назначить горячую клавишу для быстрого доступа к элементу <img>. Это улучшает доступность и удобство навигации для пользователей, особенно для тех, кто полагается на клавиатуру.
<img
src="search-icon.png"
alt="Поиск"
accesskey="s"
onclick="document.getElementById('search').focus()">
Комбинации клавиш по платформам:
| Платформа | Комбинация | Действие |
|---|---|---|
| Windows/Linux | Alt + ключ | Активирует элемент |
| Mac | Control + Option + ключ | Активирует элемент |
| ChromeOS | Alt + ключ | Активирует элемент |
Рекомендуемые клавиши:
<!-- Основные функции -->
<img src="home.png" alt="Главная" accesskey="1">
<img src="search.png" alt="Поиск" accesskey="4">
<!-- Навигация -->
<img src="prev.png" alt="Назад" accesskey="p">
<img src="next.png" alt="Вперед" accesskey="n">
JavaScript для улучшения доступности:
<img id="keyImg" src="help.png" alt="Справка" accesskey="h">
<script>
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === 'h') {
document.getElementById('keyImg').click();
console.log('Активирована справка по клавише h');
}
});
</script>
Рекомендации по использованию:
- Используйте цифры (1-9) для основных функций
- Избегайте конфликтов с системными комбинациями
- Добавляйте визуальные подсказки о доступных клавишах
- Не злоупотребляйте - ограничьтесь 3-5 важными элементами
Визуальные подсказки:
<style>
.accesskey-hint::after {
content: " [Accesskey: " attr(accesskey) "]";
font-size: 0.8em;
color: #666;
}
</style>
<img
src="print-icon.png"
alt="Печать"
accesskey="p"
class="accesskey-hint">
Ограничения и совместимость:
- Поддерживается всеми основными браузерами
- Может конфликтовать с сочетаниями клавиш браузера/ОС
- На мобильных устройствах практически не работает
- Требует документации для пользователей
Примечание: Хотя атрибут accesskey может улучшить доступность, его реализация различается между браузерами и платформами. Всегда предоставляйте альтернативные способы навигации и тестируйте выбранные комбинации в разных средах.