Accessibility: Adding Key Handlers

Posted by John Durance  

For complex widgets, which are unable to use semantic markup, it’s a good idea to add key handlers so that users can interact with them via the keyboard. In this code, the example function can be called by clicking, or by moving the focus and hitting A:

<div tabindex="0" onclick="example()" onkeydown="return shortcut(event)">Text</div>
  function shortcut(event) {
    if (event.keyCode == 65) example();
  function example() {
    alert('More text');

It’s good practice to use keys that intuitively behave in the way a user would expect. So the  key should probably move something downwards, for instance.

Related Blog posts