Keyboard Navigation – Accessible Interaction Without a Mouse
Keyboard navigation refers to the ability to fully operate a website or web application using only the keyboard, without a mouse. It is a core requirement of the WCAG (Web Content Accessibility Guidelines) and essential for digital accessibility.
Many users with motor impairments, low vision, or who rely on screen readers depend on keyboard navigation for digital interaction.
Essential Keyboard Controls
| Key | Function |
|---|---|
| Tab | Move to the next focusable element |
| Shift + Tab | Move to the previous element |
| Enter / Space | Activate links, buttons, or actions |
| Esc | Close dialogs, exit menus |
| Arrow keys | Navigate within menus, lists, or tabs |
WCAG Requirements for Keyboard Navigation
- All interactive elements must be reachable via Tab
- Visible focus indicator must be present (outline, :focus-visible)
- Maintain logical focus order
- Avoid keyboard traps (e.g., modals without Esc functionality)
- No functionality should require a mouse alone
Best Practices
- Use semantic HTML elements like <button>, <a>, and <input>
- Avoid making <div>s or <span>s clickable without keyboard support
- Use tabindex, aria-*, and role attributes carefully in custom components
- Never remove focus indicators (outline: none is a common anti-pattern)
- Test with a physical keyboard, not just DevTools
Tools for Testing
- Manual testing with keyboard only
- axe DevTools (browser extension)
- NVDA (Windows) or VoiceOver (macOS)
- WCAG Keyboard Guidelines: https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible
You can find out more about our services in the area of digital accessibility here.
