Accessibility (WCAG 2.1 AA)

WitTable is accessible by default — no special configuration required. The AriaManager applies WCAG 2.1 AA compliant attributes to the grid container and manages an aria-live="polite" region for dynamic announcements.

Live Demo

This table has built-in ARIA attributes: role=grid, aria-rowcount, aria-colcount. Use keyboard arrows to navigate; screen reader announces cell positions.

View source code

AccessibilityDemo.tsx

import { WitTable } from '@witqq/spreadsheet-react';
import { DemoWrapper } from './DemoWrapper';
import { generateEmployees, employeeColumns } from './generate-data';
import { useSiteTheme } from './useSiteTheme';

const data = generateEmployees(50);

export function AccessibilityDemo() {
  const { witTheme } = useSiteTheme();
  return (
    <DemoWrapper title="Live Demo" description="This table has built-in ARIA attributes: role=grid, aria-rowcount, aria-colcount. Use keyboard arrows to navigate; screen reader announces cell positions." height={440}>
      <WitTable
        theme={witTheme}
        columns={employeeColumns}
        data={data}
        showRowNumbers
        aria-label="Employee directory"
        style={{ width: '100%', height: '100%' }}
      />
    </DemoWrapper>
  );
}

Built-in ARIA Attributes

The grid container receives these attributes automatically:

Attribute	Value	Purpose
role	grid	Identifies the component as a data grid
aria-rowcount	Total row count	Communicates full size (not just visible)
aria-colcount	Total column count	Communicates full size
aria-label	Table name	Identifies the grid

Automatic Announcements

AriaManager announces state changes to screen readers through the aria-live region:

• Selection — “Cell B3 selected”, “Range A1 to C5 selected”
• Sort — “Column Name sorted ascending”
• Filter — “Column Status filtered, 42 rows visible”
• Validation — “Cell B3: Email is required”
• Edit — “Editing cell B3”, “Cell B3 updated”

Default Accessible Table

No configuration needed. All accessibility features are built in:

import { WitTable } from '@witqq/spreadsheet-react';

function App() {
  return (
    <WitTable
      columns={columns}
      data={data}
      aria-label="Employee directory"
    />
  );
}

Keyboard Support

All features are accessible via keyboard:

Shortcut	Action
Arrow keys	Navigate cells
Enter / F2	Start editing
Escape	Cancel editing / close menu
Tab	Move to next cell
Ctrl+A	Select all
Ctrl+C / Ctrl+X / Ctrl+V	Copy / Cut / Paste
Ctrl+Z / Ctrl+Y	Undo / Redo

API Reference

AriaManager

Method	Signature	Description
announce	(message: string) => void	Push message to aria-live region
attach	(container: HTMLElement) => void	Attach ARIA attributes to container
detach	() => void	Remove ARIA attributes