HTML table caption and summary: explain a dense data grid

Use case

An operations report lists failed seal checks by depot and shift. The short caption tells a reader which table this is. A visible paragraph explains that each depot has two shifts and that the final column counts unresolved checks. Those are different jobs. A screen-reader user can identify the table from its caption, while anyone can read the structural note before working through the numbers. Header cells still need correct scope or explicit associations; a summary does not repair a broken header graph.

<p id="seal-grid-guide">Each depot has a morning and evening row. The last column counts checks still open.</p>
<table aria-describedby="seal-grid-guide">
  <caption>Seal checks by depot and shift</caption>
  <thead><tr><th scope="col">Depot</th><th scope="col">Shift</th><th scope="col">Open checks</th></tr></thead>
  <tbody>
    <tr><th scope="row">North</th><td>Morning</td><td>4</td></tr>
    <tr><th scope="row">North</th><td>Evening</td><td>2</td></tr>
    <tr><th scope="row">West</th><td>Morning</td><td>7</td></tr>
    <tr><th scope="row">West</th><td>Evening</td><td>1</td></tr>
  </tbody>
</table>

Behavioral boundary

The description points to a visible paragraph rather than hiding instructions in an obsolete table summary attribute. Do not add a long summary to a simple grid that is already clear from its caption and headers.

Cost and maintenance

Caption and description add a small amount of markup and editorial work. The heavier cost comes from maintaining accurate header associations as columns change; test a dense table with keyboard and screen-reader table navigation.

Common Mistakes

• Do not repeat the caption in the summary.
• Do not use the caption as a substitute for row and column headers.
• Do not force unrelated layout content into a data table.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML complex tables: connect each value to all applicable headers
• HTML colgroup: assign column structure without replacing headers

Apply this in HTML incident evidence project: keep a record readable when video fails.