When Does onClick Work with the Keyboard Enter Key?

The following table contains various HTML elements with an onClick applied and a tabIndex=”0″. The purpose is to determine when a person must provide a keyboard handler to an element that is being used as a clickable object.

Best practices for progressive enhancement demands that we use native HTML elements when ever possible. However with ARIA it is possible to use a role attribute to make any container act like a button, link or for that matter almose any type of an element.

Test the following elements for your self. Tab to one of the tests contained inside the table and press the enter key. If you see a popup alert message, the keyboard works with the element.

Example 1:

When Does onClick Work with the Keyboard Enter Key?
Test Element FireFox 5 I E 9 Jaws and FF5 Jaws and IE9
Div uses onClick
DIV No No Yes Yes
Span uses onClick Span No No Yes Yes
clickable image IMG No Yes Yes Yes
A tabbable Cell using onClick TD No No Yes Yes
An A Element with onClick ANCHOR Yes Yes Yes Yes
INPUT No Yes Yes if in Manual Forms Mode.
No if in automatic Forms Mode.
Yes
BUTTON Yes Yes Yes Yes

Example 1:

If you need to build a JavaScript keyboard handler, this code may help. KeyCode 13 is the enter key and 32 is the space bar.

Code


<script>
  function KeyboardHandler(event) {
    if((event.keyCode == 13) || (event.keyCode== 32)){
      MyFunction()
    }
  }
</script>
<input type="text" onClick="KeyBoardHandler(event);" \>

Standards:

  • WCAG 2.0 SC 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

Comments are closed.