Accessibility

Semantic HTML, keyboard navigation, ARIA attributes, and responsive design for the Table component.

Semantic Structure

Renders a native <table> with <thead>, <tbody>, and <th scope="col"> elements. The table container uses role="region" with an aria-label for screen reader context.

Keyboard Navigation

Uses the Roving Tabindex pattern (WAI-ARIA Grid). When selection, expansion, or row click is enabled, the table uses role="grid" with full keyboard support.

Arrow Up/Down Navigate between rows

Home / End Jump to first / last row

Space Toggle row selection

Enter Expand row or trigger onRowClick

Page Up/Down Previous / next page

Escape Clear selection

Shift+Arrow L/R Reorder column (on header)

Sort Announcements

Sortable column headers include aria-sort attributes (ascending / descending / none). Direction changes are announced to screen readers.

Responsive Design

Below 768px, the table switches to a card-based mobile layout automatically. Column priority levels control which fields remain visible at each breakpoint. Both layouts are fully operable with assistive technology.