probeo

How to fix a table that uses a cell as its caption?

table-fake-caption page

The issue

A title row across the top of a table looks like a caption, but a screen reader treats it as an ordinary cell. The table itself has no name, so a user listing the tables on a page can’t tell them apart, and the title cell may be read as a header for every column under it.

The cause is a table built for its look: the first row holds one cell with colspan set to the table’s width, styled as a heading. HTML has an element for this, <caption>, which names the table.

Scope

Every visible table with at least two rows is checked, except layout tables marked role="presentation" or role="none". It is reported when the first row has exactly one cell, that cell has text, and its colspan covers at least as many columns as the widest of the other rows, which must be more than one.

How to check you have it

  • In probeo: the page reports table-fake-caption, “Data or header cells must not be used to give caption to a data table”, as serious. It is a best practice rule rather than a WCAG criterion.
  • By hand: look at each table’s first row in DevTools. A single cell with a large colspan is the pattern.
  • With a tool: axe DevTools has a rule with the same name.

The fix

Move the title text into a <caption> as the first child of the <table>, and delete the spanning row.

<table>
  <caption>Plans and prices</caption>
  <tr><th scope="col">Plan</th><th scope="col">Price</th></tr>
  …
</table>

Style the caption as you styled the row. It can sit above or below the table with caption-side.

Done when: no table uses a spanning first row as its title, and the check above comes back clean.

Do not

  • Do not keep the spanning row alongside the new caption.
  • Do not put the title in a heading above the table instead of naming the table itself.
  • Do not use aria-label on the table to hide a visible title row’s problem.

FAQ

What if the first row is a group header, not a title?

A row of group headers has more than one cell. A single cell spanning every column reads as a title, which is what this check looks for.

Can the caption be visually hidden?

Yes. It still names the table for assistive technology, though a visible caption helps everyone.

Does a heading above the table count as a caption?

No. A heading labels the section; <caption> names the table.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.