Coding Techniques and Tutorials
Note that when implementing keypress navigation in your design, make
sure that the shortcuts you define do not conflict with common browser
shortcuts, OS shortcuts, screen-reader shortcuts or user-defined shortcuts.
This may sound simpler than it is. As usual, extensive testing (with savvy
and novice users) before implementation will help you find issues with your
shortcuts. It’s safe to assume that the arrow keys, the “j” and “k”
combination and the “Escape” key are safe. On the other hand, using the
“Control,” “Alt” and “Shift” keys is not recommended.
Also, regard keypress navigation as an additional (and therefore optional)
feature that will not be available to users who have disabled JavaScript in
their browsers. Therefore, it is highly recommended that you offer keyboard
navigation as a secondary, not primary, layer of navigation. Below, you’ll
find some helpful techniques, tutorials and references for implementing
keypress navigation in your designs.
- Adding Keyboard Navigation with jQuery
This screencast describes how to implement keyboard navigation to
move a slider backwards and forwards. The demo and code are
available as well. - How to Create Keypress Navigation Using jQuery
This tutorial describes how to implement keypress navigation to
browse sections of the website. - Advanced Keypress Navigation with jQuery
Yo u c o u l d u s e y o u r m o u s e to s e l e c t l i n k s , b u t y o u c a n a l s o u s e t h e
arrow keys (i.e. up and down) to navigate the list. This script is a bit
advanced because of the extra functionality when the user combines
the mouse hover and key presses.