Foundation guide

Accessibility data grid documentation

Ace Grid already handles grid roles, focus, and live ARIA state. On this page, you only configure the name and description props.

What it means

Ace Grid already handles the grid role plus live row, column, focus, selection, and busy state. The public accessibility config is only three props: `ariaLabel`, `ariaLabelledBy`, and `ariaDescribedBy`.

When to use it

Use `ariaLabelledBy` when the page already has a visible heading that should name the grid. Use `ariaLabel` when there is no visible heading to reference. Use `ariaDescribedBy` only when users need extra context before they start navigating cells.

Implementation notes

Prefer real visible headings and helper text over hidden accessibility-only copy. If both aria-label and aria-labelledby are present, the linked visible label should win. Keep the name short. Keep the description focused on what the grid is for.

Relevant API

Start with accessibility.ariaLabel, accessibility.ariaLabelledBy, accessibility.ariaDescribedBy. Open the live API reference for types and defaults.