Shape
Keyboard Navigation
Making every action work with a keyboard alone, in a logical order.
What is Keyboard Navigation?
Making every action work with a keyboard alone, in a logical order.
What you learn
Everything you can click must work with a keyboard, in order.
When it helps
people can’t operate a control with keys, or the Tab key jumps around the page.
Use it at work
- Put the mouse away, and use only Tab, Enter, Space and the arrows.
- Check every control can be reached and used.
- Check the order follows the page’s reading order.
- Fix custom controls so they respond to the expected keys.
Your output
Put your mouse away and finish your product’s main task with Tab, Enter, Space and the arrow keys. Fix anything you can’t reach.
Watch for
Building controls that only work with a mouse, or a tab order that jumps around.
Related practices
Sources
Enable JavaScript to try the interactive activity.