HTML5 Accesskey

HTML5 accesskey attribute can be assigned to any focusable or actionable element on the page. The HTML5 accesskey attribute’s value is used by the user agent as a guide for creating a keyboard shortcut that activates or focuses the element. An accesskey helps users with motor disabilities in activating the element. It also helps the power users to do the task without moving the hand away from the keyboard for mouse click.

In some browsers accesskey just takes the user focus on to the element. User has to activate the element manually. Certain browsers will move the focus and activate the element when the accesskey is invoked.

How to assign an accesskey

Use the accesskey attribute with the desired shortcut as the value. The value of the accesskey must be an ordered set of unique space-separated tokens that are case-sensitive.

Choosing a best accesskey

Choosing an accesskey is a tough job. Keep the following best practices in mind while assigning them.

  • Accesskey must not conflict with user agent (browser), assistive technology (eg screen reader) or operating systems shortcut commands. Eg: Assigning accesskey “a” will conflict with favorites’ menu in internet explorer (alt + a).
  • Use one or more shortcuts to invoke the accesskey. Having one of them as a number will help for devices where only numbers can be invoked and also less chance of conflicting with user agent, assistive technology and operating systems. Most of the screen readers announces the accesskey when user focus on it. Since different user agents(browsers) have different key combinations to invoke accesskeys it is good to label the key commands. Eg: Mozilla Firefox uses Alt + shift while MicroSoft Internet Explorer uses Alt along with accesskey. See the section below to understand the process of labeling the element with key command.
  • Duplicate accesskey combinations are not advised. Meaning accesskey “a” should not be used for different elements on the same page.

Labelling the key commands with accesskey on the element

The accessKeyLabel attribute must be used to display the key combination assigned by the user agent (browser). Sample code below.

<br /> <input type=submit accesskey="c @ 1" value="Compose"/><br /> <script> function labelButton(button) { if (button.accessKeyLabel) button.value += ' (' + button.accessKeyLabel + ')'; } var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i += 1) { if (inputs[i].type == "submit") labelButton(inputs[i]); } </script><br /> </script>

Accesskey combination on different browsers

Different browsers use different key commands to invoke accesskey. Below are most used browser key command combinations.

Browser/ Operating System Windows Mac
Chrome Alt + accesskey Control + Alt + accesskey
Firefox Alt + Shift + accesskey Control + Alt + accesskey
Internet Explorer Alt + accesskey  
Safari Alt + accesskey Control + Alt + accesskey

Related Links

2 Comments to "HTML5 Accesskey"

  1. September 24, 2017 - 11:50 pm | Permalink

    Thanks, great read!
    I think there is currently no simple option to provide a good UX to both keyboard (only) users and screen reader users, as SR reads both the title and the accessKey/accessKeyLabel. Also, aria-label doesn’t override the accessKey/accessKeyLabel (NVDA + chrome/FF/edge) so again – redundant duplication for SR users.

    One last thing, as far as I know, it is safer to use numbers as access keys over alphabetical keys

Leave a Reply