Data table has no header cells
Why it matters
Screen readers announce the column and row heading as you move around a table. Without header cells, every number is read out with no context.
How to fix it
Mark the header cells with <th>, and add scope="col" or scope="row". Use tables for data only, not layout.
<table>
<tr><th scope="col">Plan</th><th scope="col">Price</th></tr>
<tr><td>Pro</td><td>£59</td></tr>
</table>Read the W3C guidance: Understanding 1.3.1 Info and Relationships.
Related rules
- Heading levels are skipped (WCAG 1.3.1)
- Heading is empty (WCAG 1.3.1)
- Several navigation areas share no labels (WCAG 1.3.1)
- List item is outside a list (WCAG 1.3.1)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.