Skip to content
UX Atlas
AccessibilityCraft conventionFoundational

Keyboard Navigation

Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.

Definition

WCAG 2.1.1 requires all functionality to be available from a keyboard, and 2.1.2 requires that focus can always move away again. This serves screen reader users, people with motor impairments, people using switch devices or voice control, and a large number of people who simply prefer keyboards.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. The checks that find most problems
  3. Expected key behaviour
  4. Sources
  5. Continue from here

The checks that find most problems

  1. 1.Put the mouse away and complete the primary task using Tab, Shift+Tab, Enter, Space, Escape and the arrow keys.
  2. 2.Confirm every interactive element can be reached and activated.
  3. 3.Confirm focus is always visible, including over sticky headers and inside scroll containers.
  4. 4.Confirm the tab order follows the visual order.
  5. 5.Confirm focus never becomes trapped anywhere except a modal dialog, which must be escapable.
  6. 6.Confirm a skip link exists to bypass repeated navigation.

Expected key behaviour

ComponentKeys
ButtonEnter and Space activate.
LinkEnter activates.
CheckboxSpace toggles.
Radio groupArrows move and select within the group. Tab enters and leaves.
TabsArrows move between tabs. Tab moves into the panel.
MenuArrows move, Enter activates, Escape closes, typing jumps to a match.
ModalFocus trapped inside. Escape closes. Focus returns to the trigger.
ComboboxArrows move through options. Enter selects. Escape closes the list.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA DashboardA Data TableA FormA Pricing PageA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Enterprise WorkflowAn Onboarding FlowAuthenticationNavigationSettings

Relied on by

Entries that assume this is already in place.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.