Атрибут accesskey позволяет назначить клавишу быстрого доступа к элементу на странице. Это может быть ссылка, кнопка или форма — всё, что может быть активировано с клавиатуры.

С 29 января 2018 года accesskey считается широко поддерживаемым (Baseline: «Widely Available»), то есть работает во всех современных браузерах.

Как это работает

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вы указываете один символ в атрибуте accesskey, и этот символ будет привязан к элементу.

Пример:

<a href="#top" accesskey="t">Вернуться наверх</a>

Теперь пользователь может нажать специальное сочетание клавиш, чтобы активировать эту ссылку — Alt + T в Windows или Control + Option + T в macOS. Это позволяет быстрее переходить по странице, особенно без мыши.

Что именно делает accesskey

  • Назначает «горячую клавишу» элементу.
  • При активации эта клавиша фокусирует или запускает элемент (например, срабатывает click у кнопки или переход по ссылке).
  • Может использоваться с button, a, input, textarea, и другими интерактивными элементами.

Когда это может быть полезно

  • В интерфейсах с повторяющимися действиями. Например, кнопка «Отправить» или «Сохранить» может иметь accesskey="s".
  • На порталах и больших системах. Быстрый переход к главному меню, поиску, списку уведомлений и т. п.
  • Для доступности. Люди, использующие клавиатуру или адаптивные технологии, смогут быстрее перемещаться по важным элементам.

Важные нюансы

  • Сочетания клавиш отличаются в разных браузерах и операционных системах. Нет единого стандарта. Например:

    • Windows (Chrome, Firefox): Alt + accesskey
    • Windows (Edge): Alt + Shift + accesskey
    • macOS (Safari): Ctrl + Option + accesskey
    • Linux: Alt + Shift + accesskey или другие варианты

  • Конфликты с системными клавишами. Вы можете случайно пересечься с уже занятыми комбинациями: Alt + F, Alt + S, Ctrl + Option + D и др. Это делает accesskey непредсказуемым.

  • Пользователи редко знают о них. Браузеры не показывают список доступных accesskey, и их сложно обнаружить без инструкций.

Лучшие практики

✅ Использовать только для самых важных элементов интерфейса
✅ Сопровождать accesskey подсказкой:

<button accesskey="s">Сохранить (Alt+S)</button>

✅ Указывать accesskey на видимых и интерактивных элементах
✅ Проверять поведение на разных платформах
❌ Не назначать один и тот же accesskey на несколько элементов
❌ Не использовать для критически важного функционала без альтернативы

Заключение

Атрибут accesskey может сделать навигацию быстрее, особенно для пользователей клавиатуры. Но он не универсален и может вести себя по-разному в зависимости от платформы. Используйте его вдумчиво: не как основное средство управления, а как дополнительный способ упростить взаимодействие для продвинутых пользователей.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.