Атрибут HTML accesskey

HTML-атрибут accesskey — это глобальный атрибут, определяющий сочетание клавиш для активации или перевода фокуса на конкретный элемент. Когда пользователь нажимает клавиши-модификаторы браузера вместе с назначенным символом, этот элемент получает фокус (а для ссылок и кнопок — активируется). Значение атрибута должно содержать один или несколько печатных символов, разделённых пробелами — браузер использует первый поддерживаемый символ.

В HTML 4.01 атрибут accesskey можно было применять лишь к ограниченному набору элементов: <a>, <area>, <button>, <input>, <label>, <legend> и <textarea>.

В HTML5 accesskey является глобальным атрибутом, поэтому его можно задать на любом элементе. Обратите внимание: установка атрибута на неинтерактивном элементе (например, <div> или <p>) лишь перемещает фокус клавиатуры на этот элемент — клик при этом не выполняется. Поэтому атрибут наиболее полезен на интерактивных элементах управления.

Синтаксис

<tag accesskey="single_character">...</tag>

Например, <button accesskey="s">Save</button> назначает клавишу s.

Как активируется сочетание клавиш

Единого стандартизированного сочетания клавиш для accesskey не существует — оно зависит от браузера и операционной системы. Пользователь удерживает клавиши-модификаторы из таблицы ниже и нажимает назначенный символ:

Если несколько элементов имеют одинаковое значение accesskey, современные браузеры, как правило, при повторных нажатиях последовательно переключают фокус между этими элементами, а не активируют только один из них.

Когда accesskey уместен (и когда нет)

accesskey лучше всего подходит для контролируемых специализированных сред, где вы знаете браузер и аудиторию, а задокументированные сочетания клавиш действительно несут пользу:

• Внутренние / интранет-инструменты, в которых опытные пользователи весь день повторяют одни и те же действия (например, «Alt+S для сохранения записи»).
• Киоски и встроенные приложения, работающие в известном браузере, где вы полностью контролируете клавиатурную среду.
• Одностраничные утилиты с небольшим числом хорошо задокументированных сочетаний клавиш.

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

• Конфликты. Выбранная клавиша может совпасть со встроенным сочетанием браузера, операционной системы или командой вспомогательных технологий.
• Обнаруживаемость. Никакого визуального индикатора наличия сочетания клавиш нет, поэтому пользователи редко о них узнают.
• Различия раскладок. Символ может отсутствовать на некоторых клавиатурных раскладках — это реальная проблема интернационализации.
• Когнитивная нагрузка. Цифровые accesskey (1, 2, 3) лишены смысла и могут сбивать с толку пользователей с когнитивными нарушениями.
• Управление фокусом. Перекрывающиеся сочетания клавиш могут мешать естественному поведению tabindex и порядку обхода страницы по Tab.

Соображения доступности

Сочетания клавиш из одного символа регулируются Критерием успеха 2.1.4 WCAG 2.1 — Сочетания символьных клавиш. Проблема заключается в том, что сочетание, привязанное к единственному символу, может срабатывать случайно — в первую очередь у пользователей программ чтения с экрана и средств речевого ввода, инструменты которых генерируют нажатия клавиш во время навигации. Непреднамеренная активация accesskey может переместить фокус, отправить форму или запустить действие, которого пользователь не планировал.

Чтобы выполнить требование критерия 2.1.4, следует давать пользователям возможность отключить сочетание клавиш, переназначить его или ограничить его действие только тем моментом, когда соответствующий компонент находится в фокусе.

Поскольку у accesskey нет видимого обозначения, сообщайте о сочетании клавиш вспомогательным технологиям с помощью атрибута aria-keyshortcuts. Он документирует нажатие клавиш для программ чтения с экрана, не меняя поведения элемента:

<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>

Пример с кнопкой и полем ввода

accesskey наиболее оправдан на интерактивных элементах формы, где перевод фокуса на элемент — именно то, чего хочет пользователь:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="search" accesskey="f">Search (Alt+F):</label>
      <input id="search" type="text" accesskey="f" />
      <br />
      <button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
        Save
      </button>
    </form>
    <p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
  </body>
</html>

Пример со ссылками

Тот же атрибут позволяет назначать сочетания клавиш навигационным ссылкам:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
  </body>
</html>

Связанные атрибуты

• Глобальные атрибуты HTML
• Атрибут HTML id
• Атрибут HTML class
• Справочник атрибутов HTML

Практика