Skip to main content

Accessibility & keyboard

The grid implements the ARIA grid pattern: the scroll container is role="grid" (treegrid for tree data) with aria-rowcount / aria-colcount, header cells are columnheader with aria-sort, and body cells are gridcell with aria-rowindex / aria-colindex.

Keyboard navigation is always on. Tab moves focus into the grid (a single cell is tabbable — a roving tabindex), then:

KeyAction
↑ ↓ ← →Move between cells (header row included)
Home / EndFirst / last cell in the row
Ctrl+Home / Ctrl+EndFirst / last cell in the grid
PageUp / PageDownJump up / down by a page
Enter / F2Activate the cell — sort a header, toggle a control, or start editing
EscapeCancel an in-progress edit

Focus is restored to the right cell as you page and (for virtualized grids) scrolls the target row into view. Pressing Enter on a cell delegates to its interactive child (a button, checkbox, or link) when there is one. Try it — click a cell below and use the arrow keys:

Loading demo…

A visually-hidden aria-live="polite" region announces sort, filter, page, and selection changes to screen-reader users. Announcement strings are localizable via localeText (announceSort, announceFilteredRows, announcePage, selectedRows).