Yogesh Bhusara
All experiments

28 / NAVIGATION

Roving Focus

The problem

When every item in a toolbar is a separate Tab stop, keyboard users must press Tab dozens of times to get past it.

The solution

The group is one Tab stop; arrow keys rove focus inside it.

Experiment

Task: Tab into the toolbar, then use arrow keys.

NAIVE

Every button is a Tab stop — press Tab repeatedly to cross the toolbar.

THOUGHTFUL

One Tab stop — Tab in, then use ← → to rove between tools.

active0
wrapTRUE

Play with the values

How it works

Seen in

Toolbars

Formatting toolbars behave as one stop with arrow-key navigation.

Tabs

Tab lists move between tabs with arrows, matching ARIA guidance.

Menus

Menu items are traversed with arrow keys, not Tab.

Radio groups

Arrow keys select within the group as a single focusable unit.

References