Accessibility · Foundation

Keyboard Navigation

Interactive work should be completable without a pointing device.

wcagfocusformsnavigation

5 minute field note

Helps create

Device-independent access

Overview

Make the interface carry more of the effort.

Provide a logical focus order, visible focus and keyboard access to every interactive control.

Human impact

Why it matters

Interactive work should be completable without a pointing device. When the interface does not account for this, people spend effort interpreting the product instead of completing the task. Applied with context, the principle supports device-independent access without removing meaningful choice or control.

Design hypothesis

If we apply Keyboard Navigation to the decision point, people should reach device-independent access with less avoidable friction.

Mechanism

How it works

01

Notice where the task currently asks people to wcag or focus without enough support.

02

Provide a logical focus order, visible focus and keyboard access to every interactive control.

03

Make the smallest change that should improve device-independent access, then compare the task before and after.

Interactive experiment

Can the task be completed without a pointer?

3–5 minutes

Complete an approval without a pointer

Open the task, then use Tab, Shift+Tab, Space and Enter. Escape closes the panel.

Turn the experiment into a decision

01

What happened

A logical focus order, visible focus and predictable controls make the form operable without pointing.

02

Why it happened

Keyboard users depend on programmatic sequence and state rather than visual proximity alone.

03

Where to apply it

Dialogs, forms, menus, data tables, command palettes and approval flows.

04

How to validate it

Complete the real task using Tab, Shift+Tab, Enter, Space and Escape, then verify names and announcements.

Open the focused lab page

Decision guide

When to use it

Building menus, dialogs and custom controls
Designing forms and data-heavy workflows
Testing a page before release

Apply it

Practical checklist

1

Reach every interactive control with the keyboard.

2

Keep focus order aligned with the visible task order.

3

Make focus visible against every background.

4

Return focus after dialogs and temporary layers close.

Watch for

Common mistakes

Adding positive tabindex values to repair source order.

Removing outlines without an equivalent focus style.

Creating clickable containers with no keyboard behavior.

Accessibility considerations

Test forward and reverse tab order plus common control keys.

Avoid keyboard traps and provide skip navigation for repeated content.

Evidence plan

How to test it

Combine an objective check with human use.

Check the relevant WCAG success criterion and technique, then complete the real task with keyboard, zoom and an appropriate assistive technology. Automated checks can support this work but cannot prove the whole experience is accessible.

Observe

Whether names, roles, states, focus and recovery remain understandable throughout the task.

Decide

Pass only when the requirement is met and a person can complete the intended task without avoidable loss of information or control.

Use with judgment

Limits and trade-offs

Keyboard Navigation is a decision lens, not a universal prescription. Context, frequency, expertise and consequence can change the right implementation.

Optimising only for device-independent access can create new costs elsewhere. Recheck access, comprehension, user control and business constraints together.

A polished prototype can still fail in real use. Validate consequential decisions with representative people and realistic content.

Design responsibly

Better outcomes must also be honest outcomes.

Use the principle to reduce avoidable effort, not to pressure people into a choice.

Keep price, risk, consent and irreversible consequences visible before commitment.

Record what evidence supports the decision and what remains an assumption.

Evidence

Sources and interpretation

Design principles are lenses, not automatic answers. Apply them in context and validate consequential decisions with users and accessibility testing.

Keep close

Key takeaways

Interactive work should be completable without a pointing device.

Reach every interactive control with the keyboard.

Pass only when the requirement is met and a person can complete the intended task without avoidable loss of information or control.

Apply the library

Score your interface in about three minutes.

Run free scorecard