← All patterns · Navigation widgets

Grid

Tabular structure with two-dimensional keyboard navigation.

Pattern

A grid is a tabular widget where users can navigate with arrow keys in both row and column directions. Spreadsheet-like.

Roles

  • grid
  • row
  • gridcell
  • rowheader
  • columnheader

States and properties

aria-rowcount / aria-colcount
Total dimensions if larger than DOM.
aria-rowindex / aria-colindex
Cell position within the conceptual grid.
aria-selected
On selected cells if the grid supports selection.

Keyboard interaction

Arrow keys
Move focus by one cell.
Home / End
First / last cell in row.
Ctrl+Home / Ctrl+End
First / last cell in grid.

WCAG criteria

  • 2.1.1 — Keyboard
  • 1.3.1 — Info and Relationships

Canonical reference

WAI-ARIA Authoring Practices Guide — Grid

More