eBay MIND Patterns
Search…
Introduction
Messaging
Input
Navigation
Disclosure
Structure
Techniques
Active Descendant
Alt Text
Ambiguous Label
Background Icon
Keyboard Trap
Live Region
Offscreen Text
Roving Tabindex
Skip to Main Content
Anti-Patterns
Appendix
Powered By GitBook
Roving Tabindex
Keyboard navigation or selection using ARROW keys
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:
Previous
Offscreen Text
Next
Skip to Main Content
Copy link
Contents
Code Example
Utilities