Table

A table displays structured data in rows and columns, with properly scoped header cells so assistive technology can convey the relationship between each data cell and its headers.

Demo

Review the table below and use a screen reader to navigate it. Move cell by cell with arrow keys to hear how each data cell is announced together with its column and row header. Try sorting a column if the interaction is available, and note how the sort state is communicated.

Monthly Sales Report
Month	Revenue	Expenses	Profit	Download
January	$10,000	$5,000	$5,000	Download
February	$12,000	$6,000	$6,000	Download

What to Observe

Each data cell is announced by a screen reader alongside its corresponding column header, providing full context without visual scanning.
The table has a visible caption or a heading immediately preceding it that identifies the data set being presented.
Header cells use the correct scope attribute to declare whether they apply to a column or a row.
If sorting is available, the current sort direction is reflected programmatically so screen readers can announce it.
The table is navigable by keyboard using Tab and arrow keys without any mouse interaction required.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Caption: An optional <caption> element inside the table that gives the entire table an accessible name describing its contents.
Table head (thead): The section grouping all column header rows, which browsers and assistive technologies treat differently from data rows.
Header cells (th): Cells that label a column or row, with a scope attribute set to col or row to define their relationship to data cells.
Table body (tbody): The section containing all data rows, keeping structure semantic and parseable.
Data cells (td): Individual cells containing the actual data values, associated with header cells through the table structure.
Sort controls: Interactive elements within header cells that change column sort order, with aria-sort applied to the active header to communicate current direction.

Accessibility Behavior

The table must use native HTML table markup — screen readers rely on the table structure to associate data cells with their headers.
Column and row header cells must carry a scope attribute so assistive technology can announce context for every data cell.
The table must have an accessible name, either through a <caption> element or an aria-label / aria-labelledby attribute.
If columns are sortable, the active sort column must expose its sort direction through aria-sort, with values of ascending or descending.
All interactive controls within the table, such as sort buttons or row actions, must be reachable and operable by keyboard.
Tables must only be used to present tabular data — never for page layout purposes.

Common Mistakes

Using <div> or CSS grid to visually replicate a table without providing any semantic table markup, making the data meaningless to screen readers.
Omitting the scope attribute on header cells, so assistive technology cannot determine which header belongs to which data cell.
Providing no accessible name for the table, leaving screen reader users without context for what the data represents.
Using a table for visual layout of non-tabular content, which confuses screen readers that announce row and column context.
Adding sort functionality without exposing the current sort state, requiring screen reader users to guess whether or how the data is ordered.

Why This Matters

Tables are one of the most information-dense components on the web, and screen reader users depend entirely on the semantic structure to navigate them. Without proper headers and scope attributes, a screen reader user hears a stream of values with no indication of what column or row each value belongs to. In data-heavy applications — finance dashboards, schedule grids, comparison charts — this makes the content completely unusable. Correct table markup costs no additional effort once the pattern is understood, and it ensures that every user can interpret the data presented to them.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.