A roving tab index is a technique whereby only one collection element is in the sequential tab order and can have focus at any given time (i.e. has a tabindex value of zero). All other elements have a negative tabindex. We can say the collection is now more widget-like, as it takes one TAB key press to enter the widget, and one TAB key press to exit the widget. A user changes the roving tabindex state and focus by using the ARROW keys.

Compare this to active-descendant based navigation where focus always remains on one element (usually a textbox), but has the appearance of moving elsewhere when using the arrow keys.

Patterns that utilize a roving tab index are: grid, menu and tabs.

Code Example

Todo

Utilities

We provide two useful JavaScript utilities for initiating a roving tab index on a collection of elements:

• ​jquery-roving-tabindex​

• ​makeup-roving-tabindex​