UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Keyboard First Navigation

Keyboard First Navigation turns a frequent interface judgment into an executable constraint before generation.

keyboardnavigationaccessibility

Design Principle

An interface that works from the keyboard is usually clearer because focus order reveals the real task structure.

Principle An interface that works from the keyboard is usually clearer because focus order reveals the real task structure.

Design action Define continuous focus order for navigation, forms, tables, dialogs, and toolbars; every interactive control has visible focus and semantic labels.

Examples Positive example: Admin tools, editors, knowledge bases, settings, and long forms need repeated operation. Counterexample: Actions appear only on hover and have no keyboard path.

Apply when Admin tools, editors, knowledge bases, settings, and long forms need repeated operation. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Define continuous focus order for navigation, forms, tables, dialogs, and toolbars; every interactive control has visible focus and semantic labels.

Apply When

  • Admin tools, editors, knowledge bases, settings, and long forms need repeated operation.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Actions appear only on hover and have no keyboard path.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
86%
Version
v1
Published
6/6/2026