Skip to content
GreenSnippets

Accessible data table markup

Use caption, thead, th scope and a scroll wrapper so screen readers and small screens handle tables well.

HTML
<div role="region" aria-labelledby="sales-caption" tabindex="0" style="overflow-x: auto">
  <table>
    <caption id="sales-caption">Quarterly sales by region (USD)</caption>
    <thead>
      <tr>
        <th scope="col">Region</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Europe</th>
        <td>120,000</td>
        <td>135,000</td>
      </tr>
      <tr>
        <th scope="row">Asia</th>
        <td>98,000</td>
        <td>110,500</td>
      </tr>
    </tbody>
  </table>
</div>

Example / expected output

Output
<!-- Right-align numeric columns with text-align: end and font-variant-numeric: tabular-nums. -->

How it works

A caption names the table, scope on header cells lets assistive technology announce the right header for each data cell, and <thead>/<tbody> give structure. Wide tables should scroll inside a focusable wrapper instead of breaking the page layout. Use tables for tabular data only, never for layout.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets