← All terms
Glossary

Roving tabindex

Roving tabindex is a keyboard pattern for composite widgets (toolbars, tablists, menus) where only one child element has `tabindex="0"` at a time and the rest have `tabindex="-1"`. Tab moves into the widget; arrow keys move between children.

Also: roving tab indexAlso: tabindex 0 -1 patternAlso: arrow-key navigation

Detailed explanation

The W3C ARIA Authoring Practices Guide describes roving tabindex as the standard pattern for any widget where the user should not have to Tab through every individual child. Examples include the Shopify admin's navigation tabs, a product image carousel's thumbnail strip, and a toolbar of formatting buttons.

The implementation: render the widget with `tabindex="0"` on the active child and `tabindex="-1"` on the rest; on arrow-key press, move focus to the next child and swap the tabindex values. Focus, not Tab order, drives the navigation.

How this applies to Shopify stores

Shopify themes that build their own image gallery or filter widgets without roving tabindex force keyboard users to Tab through every thumbnail. AccessComply detects multi-child interactive groups missing roving tabindex.

Primary source: w3.org