Tables need captions

ZMD008

Each <table> must start with a <caption> that concisely describes its purpose or content.

✅ Good

<table>
  <caption>List of team members</caption>
  <tr><td>Jane</td><td>Doe</td></tr>
</table>

❌ Bad

<table>
  <tr><td>Jane</td><td>Doe</td></tr>
</table>

When: A <table> element lacks a <caption> child

Warning: <table> missing <caption>

Solution: Include a <caption> describing the table

Why it matters

Accessibility: Tables without captions provide no context for screen-reader users and break data navigation :contentReference[oaicite:23]{index=23}.

SEO: Omitting captions removes valuable descriptive keywords that aid search engine indexing of table data :contentReference[oaicite:24]{index=24}.

In brief

  • Goal: Provide a programmatic title for data tables.
  • What to do: Include a <caption> as the first child of every <table>.
  • Why: Captions act like headings for tables, enabling screen-reader users to identify table purpose quickly.

Intent

Ensure data tables are self-describing, improving accessibility and maintenance.

Benefits

  • Screen-reader users can navigate directly to table captions and understand context :contentReference[oaicite:19]{index=19}.
  • Visual users see a clear title for complex tables, enhancing comprehension :contentReference[oaicite:20]{index=20}.
  • Search engines index caption text, boosting table visibility in search results :contentReference[oaicite:21]{index=21}.

Techniques

  • H39: Using caption elements to associate data table captions programmatically.
  • ARIA table: For non-standard tables, use role="table" and aria-labelledby referencing a caption element.

HTML Semantics

The HTML `<caption>` element defines a title for a table; it must be the first child of `<table>` to remain linked semantically :contentReference[oaicite:22]{index=22}.

References

Tips & edge cases

  • Keep captions short—treat them like table titles rather than descriptions of every cell :contentReference[oaicite:25]{index=25}.
  • Ensure each caption is unique on a page to prevent confusion among multiple tables :contentReference[oaicite:26]{index=26}.
  • When nesting tables in <figure>, consider <figcaption> instead of <caption> for authoring flexibility :contentReference[oaicite:27]{index=27}.

See also