Accessibility

Last reviewed: 12 October 2026

We build the DataGrid and the PivotGrid to meet WCAG 2.2 level AA. This page says what the components do today, how that is tested, and what does not meet the target yet. It describes the components you install, not this website. We have not had them audited by a third party and do not publish an Accessibility Conformance Report (VPAT) yet; if your procurement needs one, tell us.

Screen readers

Both grids expose the WAI-ARIA grid pattern: role="grid" (the PivotGrid's tree layout is a treegrid), rows and cells with their position (aria-rowindex, aria-colindex, aria-rowcount, aria-colcount), and an accessible name.
Focus inside the grid is announced through aria-activedescendant: the grid is one tab stop, and the arrow keys move the active cell. That is what keeps a virtualized grid of a million rows usable — only the visible rows exist in the page.
Group and tree rows say whether they are open (aria-expanded) and their level (aria-level); selected rows say so (aria-selected); DataGrid column headers carry their sort direction (aria-sort).
A polite live region announces what changed: the row count after a filter, the sort, and the number of selected rows in the DataGrid; a field's sort or filter in the PivotGrid. In the grid's language — twelve of them, Arabic laid out right to left.

Keyboard

Everything below works without a mouse. DataGrid:

Keys	What they do
`Arrow keys, Page Up/Down, Home/End, Ctrl+Home/End`	Move the active cell
`Shift+Arrow Up/Down, Space, Ctrl+A`	Extend, toggle and select all rows
`Arrow Left/Right on a group or tree row`	Collapse and expand it
`Enter / Space on a header, Shift to add a level`	Sort
`Alt+Arrow Down on a header`	Open its filter
`Shift+F10 or the menu key`	Open the row or header menu
`F2, or start typing`	Edit the cell (when editing is on); Enter commits, Esc cancels
`Ctrl+C`	Copy
`Ctrl+F, F3 (Enterprise)`	Find in the grid, next match

PivotGrid:

Keys	What they do
`Arrow keys, Page Up/Down, Home/End, Ctrl+Home/End`	Move the active cell
`Space on a row header`	Expand or collapse it
`Enter on a cell`	Act on it as a double-click does (drill-down where enabled)
`Enter / Space on a field chip`	Sort the field
`Ctrl+Arrow, Ctrl+Home/End on a field chip`	Move the field within its area
`Alt+Arrow Down on a field chip`	Open its member filter
`Delete on a field chip`	Remove the field
`Shift+F10 on a field chip`	Open its menu

Menus and dialogs close with Esc and give focus back to where it came from; a confirmation dialog keeps Tab inside it while it is open.

Contrast, high contrast and motion

Each of the 36 packaged colour schemes is measured against 19 colour pairs — text on every surface at 4.5:1, the accent and the focus ring at 3:1 — and the build fails if one drops below. Two schemes, contrast-light (black on white) and contrast-dark (white on black), are made for low vision, with strong rules. The Theme Builder reports the same pairs for a scheme of your own.
In Windows high-contrast mode (forced-colors) the focused cell, selected rows and the editor are drawn with system colours, so they stay visible when the theme's colours are replaced.
Under prefers-reduced-motion the DataGrid stops its cell flash, its row animation and its loading animations.
On touch screens the DataGrid's toolbar, pager and header buttons grow to 40px targets; PivotGrid chip buttons meet the 24×24px minimum with a taller touch area.

How it is tested

axe-core runs on both React grids in continuous integration — the DataGrid with filters, selection, footer, grouping and editing, the PivotGrid in both layouts — and any violation fails the build.
The contrast of every scheme is a test, as above.
A conformance test checks that the React and the plain-JavaScript DataGrid expose the same ARIA.

Known gaps

Found in our own audit of 12 October 2026 and not fixed yet:

PivotGrid column headers cannot be reached with the keyboard: expanding a column group and sorting by a summary need the mouse. Row headers and cells can.
The PivotGrid's cell menu (expand all, drill-down) has no keyboard shortcut.
PivotGrid headers do not carry aria-sort.
The PivotGrid does not reduce motion under prefers-reduced-motion; it animates little.
In the React DataGrid, the header menu opens from the keyboard through the browser's own context-menu key only; the plain-JavaScript grid also binds Shift+F10.

Found something else? Write to us or open an issue on GitHub. Accessibility bugs are fixed with the same priority as data bugs.