Testing accessibility in AG Grid: a grid-aware helper for Jest and Playwright

Dense data grids often hide accessibility issues, even when they appear functional. General accessibility tools like axe-core are useful, but they lack grid-specific checks. To address this, I created ag-grid-a11y-test, a small helper that adds grid-specific accessibility checks to existing tools. This article explains how to use it.

The helper follows ARIA grid patterns and AG Grid's typical markup. It checks the grid's structure, such as the presence of grid or treegrid roles and aria-rowcount and aria-colcount attributes. It also verifies that row and cell elements have aria-rowindex and aria-colindex attributes, and that column headers have accessible names. For sortable headers, it checks for aria-sort patterns.

In financial and data-heavy tables, common patterns include icon-only buttons and checkboxes without accessible names, cells displaying only icons or colored elements without text, negative values shown only by color (with an opt-in CSS class), and abbreviated numbers like 1.2M. The helper reports issues as errors (likely problems), warnings (verify), or info (advisory).

To install the package, clone the GitHub repository, build a local package, and install it in your Angular project. Use it in Jest unit tests by importing from ag-grid-a11y-test and calling the auditGrid function after the component has been created and made stable. Playwright tests can be written similarly, checking both the structure and keyboard navigation. The helper generates a report with severity levels for each finding.