Documentation navigation

On this page

Keyboard

Operate without a pointer#

Interactive demo

Keyboard playground

Keyboard playground

Press Tab to move focus through the controls. Activate with Enter or Space where the control supports it.

Documentation
Focused
—
Last key
None yet — Tab, then Enter or Space
Instructions
Tab through controls and activate with Enter or Space.

Basics

  1. Tab / Shift+Tab move focus
  2. Enter / Space activate (by control type)
  3. Escape dismisses transient UI when expected

Focus visibility#

Interactive demo

Focus indication

Skip link

Tab through the controls. Removing outlines without a replacement hides keyboard focus.

Tab order#

Interactive demo

tabindex effects

Tab order

Tab follows DOM order: First → Second → Third.

Quick reference

  • tabindex="0" — in natural tab order; use to make custom widgets focusable.
  • tabindex="-1" — programmatically focusable, not in Tab sequence.
  • Positive values — avoid; they create confusing, fragile tab order.

Traps#

Interactive demo

Avoid keyboard traps

Keyboard trap prevention means users can always leave an interactive region.

Instructions
Open the panel and Tab out freely.

Test

ActionExpect
Unplug mouseCritical tasks still complete
Watch focusFocus indicator always visible
Tab orderMatches reading/logical order