Not everyone uses a mouse. People with motor disabilities, power users, and those with temporary injuries often rely on keyboard navigation. If your site isn't keyboard accessible, you're excluding these users.
Who Uses Keyboard Navigation?
- Users with motor disabilities who can't use a mouse precisely
- Screen reader users (screen readers are keyboard-driven)
- Power users who prefer keyboard shortcuts
- Users with temporary injuries
Basic Keyboard Navigation
These keys are used to navigate web pages:
- Tab: Move to next focusable element
- Shift + Tab: Move to previous focusable element
- Enter: Activate links and buttons
- Space: Activate buttons, check checkboxes, expand dropdowns
- Arrow keys: Navigate within components (menus, sliders, tabs)
- Escape: Close modals, menus, dropdowns
Visible Focus Indicators
Users must be able to see which element is focused. Never remove focus outlines without providing an alternative.
/* Bad: removes focus indicator entirely */
*:focus {
outline: none;
}
/* Good: custom focus style */
*:focus-visible {
outline: 3px solid #e6592b;
outline-offset: 2px;
}Avoiding Keyboard Traps
A keyboard trap is when a user can Tab into an element but can't Tab out. This commonly happens with:
- Modals without proper focus management
- Embedded videos or widgets
- Custom JavaScript components
Test every interactive element to ensure users can navigate in and out using the keyboard.
Skip Links
Skip links let keyboard users bypass repetitive navigation:
<body>
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<nav><!-- Navigation links --></nav>
<main id="main-content" tabindex="-1">
<!-- Page content -->
</main>
</body>Testing Keyboard Navigation
- Put away your mouse
- Press Tab repeatedly through your entire page
- Verify you can see where focus is at all times
- Test all interactive elements (buttons, links, forms, menus)
- Ensure you can escape from all modals and dropdowns
- Run a SiteDNA scan to catch focus and tab order issues