UI Patterns
Data Table
Use <th> with scope='col'/'row'. Add <caption> or aria-labelledby. Never use tables for layout. Only 19% of observed tables had valid markup in the 2026 WebAIM Million.
In plain terms
Tables of data need proper row and column headers so screen readers can say which figure relates to which heading.
Why this matters
Without proper header cells, a screen reader reads a data table as a flat stream of numbers — users can't tell which figure belongs to which row and column. Only about one table in five is marked up correctly.
How to detect
Quick check
Inspect the markup: are header cells <th> with scope (or headers/id)? Is there a <caption>? With a screen reader, move cell to cell — are the correct row and column headers announced?