Keyboard Navigation
Keyboard navigation is the ability to move through and operate a website without relying on a mouse or touchscreen.
Interactive functionality should remain usable through keyboard input where applicable.
What It Means in Practice
A keyboard user commonly moves between interactive elements using keys such as Tab and Shift+Tab and activates controls using Enter, Space, arrow keys, or other expected controls.
They need to be able to reach interactive elements, understand where they are, and complete the same important tasks available to pointer users.
How It Works
Native HTML controls already include much of the expected keyboard behaviour.
Buttons, links, form controls, and other semantic elements generally provide a stronger starting point than recreating those controls from generic elements.
As focus moves through the interface, a visible focus state helps the user understand which element is active.
Why It Matters
Not everyone can or does use a mouse.
Keyboard access is important for people with a range of motor and visual disabilities and is also used by people working with alternative input technologies.
If an essential control cannot be reached or operated by keyboard, part of the website may effectively be unavailable.
Common Problems
Common problems include:
- Interactive elements that cannot receive focus
- Illogical focus order
- Invisible focus states
- Keyboard traps
- Custom controls without expected keyboard behaviour
- Menus or dialogs that only work with a pointer
- Focus moving unexpectedly after an interaction
How to Improve
Use semantic HTML for interactive controls whenever possible.
Navigate important pages using only the keyboard during manual accessibility testing. Verify that every necessary control can be reached, identified, operated, and exited.