Accessibility

Accessibility guidance for ZenGrid integrations.

ZenGrid provides keyboard and focus events, but production accessibility depends on your columns, renderers, editors, labels, colors, and workflow testing.

Enable Keyboard And A11y Options

a11y-grid.ts
const grid = new Grid(document.getElementById('grid')!, {
  columns,
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  enableKeyboardNavigation: true,
  enableA11y: true,
  enableSelection: true,
});


grid.setData(rows);
grid.render();

Focus And Keyboard Events

focus-events.ts
grid.on('focus:change', ({ cell, previousCell }) => {
  console.log({ cell, previousCell });
});


grid.on('focus:in', ({ cell }) => {
  console.log('focus in', cell);
});


grid.on('focus:out', ({ cell }) => {
  console.log('focus out', cell);
});


grid.on('key:down', ({ cell, key, preventDefault }) => {
  if (key === 'Enter') {
    preventDefault();
    console.log('enter on', cell);
  }
});

Accessible Headers

headers.ts
const columns: ColumnDef[] = [
  {
    field: 'email',
    header: {
      text: 'Email',
      tooltip: { content: 'Primary contact email' },
    },
    width: 260,
  },
];

Renderer Guidance

  • Preserve text equivalents for icons and visual status indicators.
  • Keep interactive controls reachable and named.
  • Do not rely on color alone.
  • Verify high-contrast and keyboard-only flows.
  • Test custom editors with screen readers before production adoption.

Announcements

Use events to announce user-visible state changes in your own live region.

live-region.ts
const liveRegion = document.getElementById('grid-live-region')!;


grid.on('sort:change', ({ sortState }) => {
  liveRegion.textContent = `Sort changed. ${sortState.length} sorted columns.`;
});


grid.on('filter:change', ({ filterState }) => {
  liveRegion.textContent = `Filters changed. ${filterState.length} active filters.`;
});


grid.on('selection:change', ({ ranges }) => {
  liveRegion.textContent = `${ranges.length} selection ranges.`;
});
⚠ Warning

Treat accessibility as an application acceptance test, not a checkbox. Validate the final grid with your actual renderers, editors, colors, and assistive technology targets.