Agent Wranglers

AXS-22Recommended

Give tables headers

Mark up data tables with th, scope and a caption or label. Use tables only for data, never for layout. This is WCAG criterion 1.3.1 (A).

By Agent Wranglers. Updated .

How to do it

Use <th scope="col"> and <th scope="row"> with a <caption>. On narrow screens, let rows stack instead of scrolling. Then add explicit table roles, because changing display drops the table role in some browsers.

Examples

HTML example

<!-- Explicit roles, because stacked rows lose their table role in some browsers -->
<table class="table" role="table">
  <caption>Opening hours</caption>
  <thead><tr role="row"><th scope="col" role="columnheader">Day</th><th scope="col" role="columnheader">Hours</th></tr></thead>
  <tbody><tr role="row"><th scope="row" role="rowheader">Monday</th><td role="cell" data-label="Hours">9:00 to 17:00</td></tr></tbody>
</table>

How to check

axe th-has-data-cells and td-headers-attr pass. A test finds a caption or aria-label on every table.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/structure-and-names/data-tables">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.