Accessibility

Accessible by default — nothing to switch on

The grid ships as a correct WCAG 2.1 AA component out of the box: full ARIA structure, a live region that speaks state changes, and complete keyboard reach. There is no accessibility: true flag and no per-column wiring — turn on sorting, selection, filtering, paging and editing (all shown above, all free) and the accessible behaviour comes with them.

Screen readers hear what happens

A single polite live region per grid announces the events that matter, in your app's language (every string is a GridMessages key, English and Arabic built in). Turn on a screen reader and try the grid above:

When you…	…the grid announces
Sort a column	"Name: sorted ascending" / "descending" / "Sort cleared"
Type in a filter	the result count — "8 results"
Load or page the data	"120 rows loaded" · "Page 2 of 6"
Commit an edit	"Salary updated"
Select all / clear	"20 rows selected" · "Selection cleared"

Announcements fire on state events only — scrolling thousands of virtual rows never makes a sound, and a burst of rapid changes collapses into one message. The real row count comes from your data source, so it's truthful even when only a page is loaded.

Naming the grid

A screen reader announces the grid by name the moment focus enters it. By default that name is Data Grid, which is enough on a page with one grid and useless on a page with two — a listener hears the same three words twice and has no way to tell which one they landed in.

Give it a real name with config.messages.gridLabel. The grid on this page is called Employee directory; that string becomes the grid's accessible name, and it is the first thing a screen-reader user hears here.

config: GridConfig = {
  messages: { gridLabel: 'Employee directory' }
};

messages holds every other string the grid speaks or shows too — the empty and error text, the pager labels, the names on the selection checkboxes. Setting one leaves the rest at their defaults.

Everything works from the keyboard

Focus enters on the first cell; arrows move it and the grid scrolls to follow. The header row is part of the path — arrow up from the top row onto a column header and press Enter or Space to sort it. Arrow onto the filter row and Enter steps into the input, Escape steps back out.

Keys	What they do
↑ ↓ ← →	Move one cell — across the body, the filter row, and the header row.
Tab / Shift+Tab	Next / previous cell. At the last cell focus leaves the grid — never a trap.
Home / End · Ctrl+Home / Ctrl+End	Row edges · grid corners.
Enter / Space on a header	Sort the column.
Enter on a cell	Edit it — or, when the cell holds a link or button, step into that content (Escape returns).
Space on a row	Select / deselect it.

Proven, not promised

The grid's accessibility is enforced by an automated axe-core gate in CI: the demo grids are scanned against WCAG 2.1 AA on every change and must stay at zero violations. Correct row/column counts and indices, aria-sort, group and tree semantics, labelled controls, and a clean role subtree are all verified — not left to a manual audit.