Data Grid Accessibility

The Data Grid ships accessible controls for its interactive chrome and exposes every string for translation. This page documents what’s supported today and what’s still on the roadmap.

Grid keyboard navigation

With cellNavigation on, the grid implements the full ARIA grid pattern: role="grid", aria-colcount/aria-colindex alongside the absolute aria-rowcount/aria-rowindex, a single tab stop with a roving-tabindex active cell, and arrow-key movement across header and data cells. The option is opt-in — claiming role="grid" without the full keyboard contract would be worse than the native table semantics the grid keeps by default.

Column menu

The column menu follows the ARIA menu pattern:

• Arrow keys move between items; Home/End jump to the first/last item.
• Escape closes the menu and restores focus to the ⋮ trigger.
• Move left / Move right give a keyboard-accessible alternative to drag-and-drop column reordering.

All menu labels come from labels, so the menu is fully translatable.

Selection

The selection checkboxes are real form controls with accessible labels (selectRow, selectAllRows) — reachable and toggleable by keyboard.

Server-side loading

In server-side mode the grid sets aria-busy while a request is in flight and exposes the loading label, so assistive tech announces the pending state.

Live announcements

Result counts are announced through an ARIA live region using the resultsAnnouncement label ({count} results) as filters change.

Current limits

cellNavigation (and the inline editing built on it) is opt-in in this release. Screen-reader-verified defaults — flipping role="grid" on out of the box — are a separate decision planned after NVDA and VoiceOver testing.