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>
<script>
function shortcut(event) {
if (event.keyCode == 65) example();
}
function example() {
alert('More text');
}
</script>
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
- Accessibility 1: Why Create Accessible Websites?
- Accessibility 2: Aural Interaction and Screen Readers
- Accessibility 3: Keyboard Interaction, Special Keys and Shortcuts
- Accessibility 4: Creating a Logical Dom
- Accessibility 5: Adding Key Handlers
- Accessibility 6: Managing Focus
- Accessibility 7: Describing Images and Forms
- Accessibility 8: Adding Semantics
- Accessibility 9: Aria Attributes