CONCEPT

Keyboard Navigation

Properties1
tagsaccessibility, keyboard-navigation, focus, skip-links, wcag, web-dev

2 min read

Keyboard Navigation

Ensuring a site can be operated entirely with the keyboard — a core accessibility requirement and a child topic of Web Accessibility (WCAG 2.2 AA).

Definition

Keyboard navigability means every function works via keyboard alone: Tab/Shift+Tab to move between interactive elements, arrows to scroll, Enter/Space to activate, Esc to dismiss. Per Eleanor Hecks (What Does It Really Mean For A Site To Be Keyboard Navigable?), it rests on four elements: (1) visible focus indicators (never suppressed with outline:0/outline:none; contrast can be raised in CSS), (2) logical tab order (follows reading order; disabled buttons and out-of-order elements break it), (3) skip-navigation links (must be among the first Tab stops to work), and (4) keyboard-operable interactive elements (anything clickable/draggable reachable via Tab/arrows, activated with Space/Enter). Test with a keyboard-only walkthrough against a criteria chart; relevant WCAG techniques are G90, G202, H91.

Established — this is WCAG-grounded practice, corroborated by an independent, reputable publication (deepening the vendor-sourced Web Accessibility (WCAG 2.2 AA) page). It’s a sub-topic of accessibility with enough distinct substructure (focus, tab order, skip links, testing) to stand alone.

Key Properties

  • Never hide focus indicators; ensure ≥3:1 contrast, ≥2 px outline.
  • Tab order = reading order; avoid disabled-button traps and out-of-order focus.
  • Skip links only work if they’re among the first Tab stops.
  • All interactive/draggable elements must be keyboard-operable.
  • Test keyboard-only each release; WCAG techniques G90/G202/H91.

Examples from Sources

ExampleSource
Anti-pattern: outline:0/outline:none removing the visible focus boxWhat Does It Really Mean For A Site To Be Keyboard Navigable?
Skip links (HSBC) placed as the first Tab stops so keyboard users can jump to contentWhat Does It Really Mean For A Site To Be Keyboard Navigable?

In the Sources

SourceContext
What Does It Really Mean For A Site To Be Keyboard Navigable?The four elements + testing method + WCAG techniques.

Concepts: Web Accessibility (WCAG 2.2 AA) (parent), Responsive & Intent-Based Design, Clean Code & Maintainability Entities: Eleanor Hecks, Smashing Magazine