Атрибут accesskey назначает элементу подсказку для клавиатурного быстрого доступа: сочетание клавиш, которое переводит на элемент фокус, а у кнопок и ссылок ещё и нажимает их. Это глобальный атрибут - его можно прописать на любом теге, но саму комбинацию клавиш браузер выбирает сам, разработчик задаёт только букву.
<button accesskey="s">Сохранить (S)</button>В этой статье
- Атрибут accesskey в HTML: что это и как увидеть подсказку
- Как нажать комбинацию: своя для каждой ОС
- Несколько элементов с одним accesskey - кто получит фокус
- accesskey не делает элемент кликабельным
- accesskey и доступность: почему от него часто отказываются
- Частые ошибки с атрибутом accesskey
- Шпаргалка по атрибуту accesskey
Атрибут accesskey в HTML: что это и как увидеть подсказку
Значение accesskey - один печатный символ: буква, цифра или символ, который можно набрать на клавиатуре. Несколько элементов могут получить разные буквы, а один элемент - сразу несколько вариантов через пробел в значении атрибута. Сам браузер не подчёркивает нужную букву автоматически и не показывает подсказку - это задача разработчика: обычно букву выделяют в тексте кнопки или добавляют рядом в скобках.
<button accesskey="s">Сохранить (S)</button>
<button accesskey="c">Отмена (C)</button>Как нажать комбинацию: своя для каждой ОС
HTML не фиксирует единую комбинацию - какие клавиши нажимать вместе с буквой, решает браузер и операционная система. Из-за этого указать на странице одну универсальную подсказку не получится: на разных устройствах читателя могут сработать разные сочетания.
| Система | Сочетание клавиш |
|---|---|
| Windows и Linux | Alt+буква, а в части браузеров - Alt+Shift+буква |
| Mac | Control+Option+буква |
Дополнительная сложность - раскладка клавиатуры. Если accesskey задан кириллической буквой, сочетание сработает только тогда, когда активна раскладка с этой буквой на клавише; с латинской буквой такой зависимости нет, поэтому на практике accesskey почти всегда задают латиницей, даже на русскоязычных страницах.
Несколько элементов с одним accesskey - кто получит фокус
Ничто не запрещает прописать одинаковый accesskey нескольким элементам сразу, но единого правила на этот случай в спецификации HTML нет - какой из них получит фокус при нажатии, остаётся на решение браузера: один переходит к первому совпадению в разметке, другой - к последнему, третий переключается между совпадениями при повторных нажатиях.
<button accesskey="k">Первая кнопка (K)</button>
<button accesskey="k">Вторая кнопка (K)</button>Поэтому значения accesskey лучше делать уникальными в пределах страницы - иначе поведение станет непредсказуемым не только для читателя, но и для самого разработчика.
accesskey не делает элемент кликабельным
accesskey - это только подсказка для горячей клавиши, а не замена фокусируемости и не замена клика. У ссылки с href и у <button> есть собственное действие по умолчанию, поэтому их accesskey и переводит фокус, и выполняет это действие. У <div> без tabindex своего действия нет и фокуса тоже нет - клавиатура его просто не видит, и accesskey ничего не меняет. Добавление tabindex="0" к div возвращает ему фокус, но не клик: нажатие просто выделит элемент, без запуска какого-либо действия.
<div accesskey="d">div без tabindex - фокуса нет</div>
<div accesskey="e" tabindex="0">div с tabindex="0" - только фокус</div>
<button accesskey="b">button - фокус и клик</button>accesskey и доступность: почему от него часто отказываются
Руководства по доступности советуют применять accesskey с осторожностью, а на обычных сайтах - вовсе избегать. Причины: сочетание легко совпадает с горячими клавишами самого браузера, операционной системы или программы чтения с экрана, и тогда вместо нужного действия сработает что-то другое или вообще ничего. Пользователь при этом обычно не знает, что на странице есть такие сочетания - без видимой подсказки о них просто негде узнать.
Если горячая клавиша всё же нужна, подсказку о ней показывают прямо в тексте элемента, а не прячут в title или aria-атрибутах, и оставляют обычный способ выполнить то же действие мышью или по Tab - accesskey должен быть ускорением, а не единственным путём.
Частые ошибки с атрибутом accesskey
С accesskey чаще путают не синтаксис, а то, что он реально меняет на странице.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ожидают, что буква в кнопке сама подчеркнётся | Браузер не выделяет букву визуально - без собственного оформления разработчика подсказки не видно совсем | Подчёркивать нужную букву вручную через CSS или показывать её в скобках |
| Указывают accesskey кириллицей | Сочетание сработает только при активной раскладке с этой буквой, в остальных случаях - никогда | Использовать латинские буквы, даже на русскоязычной странице |
| Прописывают accesskey тегу div без tabindex и ждут клика | У div своего действия нет и фокуса тоже нет без tabindex - нажатие ни на что не влияет | Добавлять tabindex для фокуса или взять <button>, если нужен клик |
| Повторяют один accesskey на нескольких элементах без расчёта на разницу | Какой элемент сработает - решает браузер, а не разметка, результат непредсказуем | Делать значения accesskey уникальными в пределах страницы |
| Делают accesskey единственным способом выполнить действие | Сочетание может конфликтовать с горячими клавишами браузера или ОС и просто не сработать | Оставлять обычный клик или Tab-переход рядом с горячей клавишей |
Шпаргалка по атрибуту accesskey
| Правило | Что запомнить |
|---|---|
| Где работает | На любом теге (глобальный атрибут) |
| Значение | Один печатный символ; несколько вариантов - через пробел |
| Windows/Linux | Alt+буква, в части браузеров - Alt+Shift+буква |
| Mac | Control+Option+буква |
| Раскладка | Надёжнее работает с латинскими буквами |
| Несколько элементов с одним accesskey | Какой сработает - решает браузер, правило не зафиксировано |
| a[href] / button | Фокус и клик по accesskey |
| div без tabindex | Фокуса нет, accesskey ничего не меняет |
| div с tabindex="0" | Только фокус, клика нет |
| Рекомендация по доступности | Использовать с осторожностью, подсказку показывать явно, оставлять обычный способ действия |
