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.
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 |
