Tables are one of the most complex structures for screen reader users. Our DataTable ships the full W3C APG Grid pattern on top of native table semantics, so every cell is reachable by keyboard and correctly announced.

Accessibility Features

Semantic Headers: Correct use of <th scope="col"> with sortable headers cycling aria-sort through undefined → ascending → descending.
APG Grid roles: role="grid" on the <table>, role="row" on rows, role="columnheader" on headers, and role="gridcell" on data cells — layered over native table elements so screen readers retain their built-in table mode.
Cell-wise keyboard navigation (WCAG 2.1.1): Arrow keys move focus between adjacent cells (clamped at row/column bounds), Home/End jump to the first/last column of the current row, Ctrl+Home/Ctrl+End jump to the table corners, and PageUp/PageDown page through ten rows at a time.
Single-tabindex roving: Only the active cell is in the tab sequence (tabindex="0"); every other cell is tabindex="-1". Clicking any cell moves the roving anchor so keyboard and mouse stay in sync.
Sort Announcements: Enter or Space on a focused sortable header triggers a sort and announces the new state. Arrow / Home / End / Page navigation is focus-only and never accidentally re-sorts.

Usage Example

import { DataTable } from '@holmdigital/components'; <DataTable data={users} columns={columns} caption="List of audited organizations" />