Semantic table structure

Use thead, tbody, and optionally tfoot to group rows by purpose. Use th for header cells and td for data cells — never style td elements to look like headers. Screen readers announce th cells as column or row headers, helping users navigate large tables. Add a caption element as the first child of the table to describe its purpose — assistive technology announces this before reading cell data.

<!-- Accessible HTML table best practices -->
<table role="table" aria-label="Employee directory">
  <caption>Q1 2026 Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Region</th>
      <th scope="col" aria-sort="descending">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>  <!-- row header -->
      <td>North</td>
      <td>$45,000</td>
    </tr>
  </tbody>
</table>

<!-- Key attributes: -->
<!-- caption — visible table description -->
<!-- scope="col|row" — associates headers with data -->
<!-- aria-sort — indicates sorted column -->

The scope attribute

Add scope='col' to column headers and scope='row' to row headers. This tells screen readers how to associate data cells with their headers. For simple tables with a single header row, most screen readers infer scope automatically, but explicit scope is essential for complex tables with multi-level headers. For tables spanning multiple header rows or columns, use headers and id attributes to create explicit cell-to-header associations.

Common accessibility mistakes

Using tables for page layout instead of tabular data confuses screen readers. Empty th cells waste time — if a column needs no header, consider whether the data belongs in a table. Merged cells (colspan/rowspan) break navigation in screen readers unless headers are explicitly linked with the headers attribute. Missing caption or summary means users have no context before entering the table. Color-only distinctions (red vs green rows) exclude colorblind users — always pair color with text or icons.