a11y/table-headers

Why

Screen readers read a cell together with its column and row headers ("Price, Basic: Free"). With bold <td> cells instead of <th>, a table of numbers becomes a list of values with no meaning.

Fix

Use <th scope="col"> for column headers (in <thead>) and <th scope="row"> for the first cell of each row when it names the row. Add a <caption>. For tables used only to lay out an email or a legacy page, set role="presentation".

Examples

<!-- bad -->
<table><tr><td><b>Plan</b></td><td><b>Price</b></td></tr><tr><td>Basic</td><td>Free</td></tr></table>
<!-- good -->
<table>
  <caption>Plans</caption>
  <thead><tr><th scope="col">Plan</th><th scope="col">Price</th></tr></thead>
  <tbody><tr><th scope="row">Basic</th><td>Free</td></tr></tbody>
</table>

Sources

• WCAG 2.2, Understanding SC 1.3.1 Info and Relationships
• W3C WAI tutorials, Tables
• WCAG 2.2 Technique H63, using the scope attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/table-headers