Table

A semantic data table with caption, scoped headers and a keyboard-scrollable region.

Table

Sample conformance results by success criterion
Criterion Level Status Issues
1.1.1 Non-text Content A Pass 0
1.4.3 Contrast (Minimum) AA Review 3
2.1.1 Keyboard A Fail 7
2.4.7 Focus Visible AA Pass 0

Using the data table accessibly

Reach for this component when you are presenting real tabular data — rows and columns whose meaning depends on the header each cell sits under.

Do

  • Use a real <table> only for genuine data with meaningful rows and columns.
  • Give it a <caption> and mark header cells as <th> with scope="col" or scope="row".
  • Keep the header-to-cell association intact at every screen size.

Don't

  • Don't use <table> markup to lay out a page or align unrelated content.
  • Don't leave headers as plain <td> styled to look bold — assistive tech won't announce them.
  • Don't flatten rows into stacked cards on small screens in a way that breaks each value's link to its header.

Build it right

  • Add a <caption> that names what the table contains.
  • Use <th> with scope="col"/scope="row"; for complex tables, link cells with headers and id.
  • Wrap wide tables in a keyboard-scrollable region: tabindex="0", role="region" and an aria-label.
  • Preserve the header-to-cell relationship across all breakpoints, not just on desktop.

The source CSS for this component lives in assets/css/components/table.css.