th, scope und das caption-Element

A real data table shows relationships between rows and columns. Mark it up well and screen readers can announce which header each value belongs to.

If every cell is just a td, a screen reader reads numbers with no context. The user hears values but never learns what they mean.

Swap header cells from td to th. Now the browser knows those cells label the data, not hold it, and exposes them as headers.

A th element is announced as a header and can be tied to the cells it describes. That link is what gives lonely numbers their meaning.

Add scope to each th to say which cells it covers. The value is col for a column header or row for a row header.

Use scope=col on the header at the top of a column. Every cell below it inherits that label as the user moves down.

Use scope=row on the first cell of a row when it names that row, like a person or a date along the left edge.

The caption element gives the whole table a title. Screen reader users hear it first, so they know what they are about to explore.

Place caption as the very first child inside the table, right after the opening tag. Any other position is invalid and may be ignored.

A nearby h2 is not enough. The caption is programmatically tied to the table, so users discover the title even when jumping table to table.

Caption, header row of th with scope, then data rows. This foundation makes most simple tables fully accessible with zero ARIA.

You are labeling the column header at the top of a table.

You learned the trio of accessible tables: th for headers, scope to aim them, and caption to name the table. That is most of the job done.