A toolbar should use roving tabindex

Rule toolbar-roving-tabindex · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

The toolbar pattern keeps one control in the page Tab sequence and moves between its controls with arrow keys. When every control is independently tabbable, keyboard users must Tab through each one, which is slow and non-standard. (Structural check; runtime arrow-key behaviour is verified separately.)

How to fix#

Put tabindex="0" on one toolbar control and tabindex="-1" on the rest, and move focus with arrow keys. Skip this if you manage focus with aria-activedescendant instead.

Example#

<div role="toolbar"><button>Bold</button><button>Italic</button></div>

<div role="toolbar"><button tabindex="0">Bold</button><button tabindex="-1">Italic</button></div>

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• APG — Toolbar