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:
| 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 |
 |
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)
