Keyboard Navigation

Keyboard access is foundational infrastructure — if it only works with a mouse, accessibility is incomplete.

01 — Purpose

Keyboard navigation is infrastructure

If functionality requires a mouse, accessibility is incomplete — keyboard access is not an enhancement.

Keyboard users include people who cannot use a pointer, power users who prefer keys, and assistive technology users whose tools depend on focusable elements and logical order. Every interactive path you ship should work without a mouse.

See the navigation pattern and accessibility standard for site-wide expectations.

02 — Principles

Operable without a pointer

All interactive functionality remains available from the keyboard.

  • every action has a keyboard path — activate, dismiss, submit, navigate
  • tab order follows reading order and task flow — not DOM accident
  • focus is always visible — users must see where they are
  • standard keys work as expected — Enter, Space, Escape, arrows where appropriate

03 — Practice

Good keyboard UX

Predictable order, visible focus, real controls.

  • use native button, a href, and form controls before custom widgets
  • skip link to main content on every page — test it first in the tab order
  • dropdowns and menus: arrow keys, Escape to close, focus returns sensibly
  • mobile menu button toggles with Enter/Space; links inside remain tabbable when open
  • no keyboard traps except intentional temporary UI — see focus traps

04 — Avoid

Common keyboard failures

These show up in review constantly — catch them before merge.

  • focus outlines removed or reduced to invisible — “outline: none” without a replacement
  • hover-only menus, tooltips, or actions with no keyboard equivalent
  • positive tabindex values that hijack tab order
  • div click handlers instead of buttons — no role, no keyboard activation
  • trapping focus with no Escape path — see focus traps

05 — Close

Tab through the whole journey

One uninterrupted keyboard pass beats ten audit reports.

Put away the mouse. Complete sign-up, checkout, or your app’s critical path using Tab, Shift+Tab, Enter, Space, and Escape only. Note where focus disappears, jumps unexpectedly, or lands on hidden content.

Pair with focus management when overlays open and the accessibility QA checklist before release.