A grid should use roving tabindex

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

↩ Back to the rules index · WCAG cross-reference

Why it matters#

The grid pattern moves between cells with arrow keys, keeping a single cell in the page Tab sequence. When many cells are independently tabbable, keyboard users must Tab through every cell, which is slow and non-standard. (Structural check; runtime arrow-key behaviour is verified separately.)

How to fix#

Put tabindex="0" on one cell and tabindex="-1" on the rest, moving focus with arrow keys. Skip this if you manage focus with aria-activedescendant instead.

Example#

<div role="grid"><div role="row"><div role="gridcell" tabindex="0">A</div><div role="gridcell" tabindex="0">B</div></div></div>

<div role="grid"><div role="row"><div role="gridcell" tabindex="0">A</div><div role="gridcell" tabindex="-1">B</div></div></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

References#

• APG — Grid