Tabs should use roving tabindex

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

↩ Back to the rules index · WCAG cross-reference

Why it matters#

The keyboard tabs pattern keeps a single tab in the page Tab sequence (tabindex="0") and moves between tabs with arrow keys. When every tab 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 the active tab 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="tablist"><button role="tab">One</button><button role="tab">Two</button></div>

<div role="tablist"><button role="tab" tabindex="0">One</button><button role="tab" tabindex="-1">Two</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 Best practice

References#

• APG — Tabs keyboard