Accessible tables in Breakdance: what WCAG actually asks for

Tables are one of the most requested elements for Breakdance, and one of the easiest to get wrong. A grid of divs looks like a table, but a screen reader cannot tell which header belongs to which value.

The three things that matter

1. A caption. It names the table. It can be visible or only available to screen readers.
2. Header cells. Column headers, and optionally the first column as row headers, so every value has context.
3. Keyboard access. Wide tables scroll inside a focusable region instead of breaking the page.

Sorting without confusion

Sortable columns use real buttons in the header. The current direction is exposed with aria-sort and announced after every change. Numbers in German and English notation, dates and text are detected per column.

Small screens

From a breakpoint of your choice, rows turn into label and value blocks. The semantics stay the same, only the layout changes.

See all variants on the Table demo page.