HTML5 Accesskey Attribute: you may not need JavaScript to add Keyboard Shortcuts

Does your application implements keyboard shortcuts? Surely to solve this necessity you may have probably implemented keydown event listeners with JavaScript to the entire document:

// Register the key handler 
document.addEventListener('keyup', function(e){
    // This would be triggered by pressing CTRL + A
    if (e.ctrlKey && e.keyCode == 65) {
        window.location.href = "http://ourcodeworld.com"; 
    }

    // Or with ALT + A
    //if (e.altKey && e.keyCode == 65) {
    //    window.location.href = "http://ourcodeworld.com"; 
    //}
}, false);

However, such approach is not always necessary according to the conditions that you're working with. An useful attribute that a lot of web developers doesn't know, is the interesting accesskey attribute of a DOM element. The accesskey global attribute provides a hint for generating a keyboard shortcut (that is different on every browser and OS) for a DOM element. This attribute consists of a single Unicode character, that in. The browser uses the first one that exists on the computer keyboard layout.

Support in browsers

The operation to activate the accesskey depends on browser and its platform:

Using the accesskey attribute

To define the key in your markup, add the accesskey attribute with the unicode keycode that will trigger the main action of the element (click usually):

<!-- 
    Redirect to the Our Code World website 
    clicking on the Link or simply pressing
    ALT + A    
-->
<a href="http://ourcodeworld.com" accesskey="a">
    Redirect to Our Code World
</a>

Although there are some cases where you really will need to add an event listener cause of the function that is executed when the user triggers the key combination, there are other cases when just setting this attribute properly will be enough. For example, a simple redirect function that can be achieved as well clicking a Link element.

You can even execute inline JavaScript (not so good idea, but functional) inside href attribute of a <a> element:

<a href="javascript:alert('Hello')" accesskey="a">
     Say Hello
</a>

In the "standards", is common to see that you can reset a form using the accesskey attribute r:

<form>
    <input type="text" name="name" />
    <input type="text" name="subject" />
    <textarea name="description"></textarea>

    <!-- Submit Form with the button or pressing ALT + S -->
    <input type="submit" value="Send Form" accesskey="s"/>

    <!-- Reset the form with the button or pressing ALT + R -->
    <input type="reset" value="Reset Form" accesskey="r"/>
</form>

Once the user fills the form, he can reset it pressing just ALT + A.

Happy coding !