Keyboard Navigation

Keyboard navigation is the ability to move through and interact with a Design System using only the keyboard — no mouse or touch. It's essential for people who can't use a mouse (motor impairment, eye tracking, voice control) and often faster for power users.

Standard keyboard conventions:

Tab: Move focus to the next interactive element.
Shift+Tab: Move focus backwards.
Enter: Activate a button or link.
Space: Activate a button, toggle a checkbox.
Arrow keys: Navigate within components (menu items, tabs, radio buttons). Don't re-purpose arrow keys for page scrolling or navigation — that's what Tab and Page Up/Down are for.
Escape: Close a menu, dialog, or popover.

In a Design System, every interactive component must support these. A Button must respond to Enter and Space. A Menu must handle arrow keys. A Dialog must trap focus and respond to Escape. A Table with sortable columns must support keyboard activation of column headers.

The responsibility split:

Simple elements (Button, Link, Input): Browsers handle Tab and basic activation. The Design System just needs to make sure they're in the DOM with the right semantics.
Complex components (Menu, Tabs, Accordion): The Design System must implement focus management and keyboard event handling. Use WAI-ARIA patterns as documentation.

Testing: use only the keyboard. No mouse. Can you navigate to every interactive element? Can you activate it? Does focus move logically? Does Escape close modals? Can you use a dropdown menu with arrow keys? These aren't edge cases — they're baseline requirements.

Related: Focus management · Focus indicator · WAI-ARIA · WCAG · Accessible design