Associate Table Headers with Data Cells

This check finds table header cells that do not describe any data cells, or data cells whose relationship to th elements is unclear.

Why this matters

Visual position communicates a table’s structure to sighted users. Screen readers need semantic header relationships to announce the context of each value, especially in tables with multiple header levels.

How to fix it

1. Use <th scope="col"> for column headers and <th scope="row"> for row headers in simple tables.
2. For complex tables, assign unique IDs to header cells and reference those IDs from each data cell’s headers attribute.
3. Keep layout-only content out of table markup.
4. Add a concise <caption> that identifies the table’s subject.

When the finding appears across many URLs, fix the shared component or layout that produces it instead of patching generated HTML page by page. Recheck representative templates and responsive states after deployment so the correction does not create a regression elsewhere.

How to verify the fix

Navigate the table with a screen reader or inspect its accessibility tree. Each data cell should announce the relevant row and column headers in a useful order.

Keep before-and-after evidence for the affected URL, original output, correction, and verification method. If markup changes after load, test consent states, localization, responsive variants, and client-side navigation because the initial HTML and rendered DOM can differ.

Further reading

• W3C tables tutorial