Toolbar

A row of related actions or controls.

Pattern

A toolbar groups commands or controls that operate on the page or a region of it. Roving tabindex moves focus between toolbar items so the toolbar takes a single Tab stop.

Roles

toolbar

States and properties

aria-label: Required if there's no visible label.
aria-orientation: horizontal (default) or vertical.

Keyboard interaction

Left / Right arrow: Move between toolbar items.
Home / End: First / last item.

WCAG criteria

2.1.1 — Keyboard

Canonical reference

WAI-ARIA Authoring Practices Guide — Toolbar

All patterns
WidgetPatternAnalyzer — the analyser that validates these patterns.
Back to Paradise