Skip to content
StoreA11y

WooCommerce · 1.3.1 Info and Relationships (Level A)

Table headers are not associated with any data on WooCommerce

Some table header cells describe no data cells. A screen reader reads a data table by announcing the relevant header before each value; when the association is broken the shopper hears a grid of bare numbers. Size charts and shipping-rate tables are where this shows up on a store.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Give every <th> a scope: scope="col" for a column header, scope="row" for a row header.
  2. Make sure the table is not being used purely for layout. If it has no headers at all, it is a layout table and should be rebuilt with CSS grid.
  3. Merged cells need headers="…" on each <td>, referencing the ids of every header that applies.
  4. A <caption> naming the table ("UK size conversion") helps shoppers who arrive at it out of context.

Where this usually lives

woocommerce/single-product/product-attributes.php, shipping tables in the block editor

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<table>
  <caption>UK to EU size conversion</caption>
  <thead>
    <tr><th scope="col">UK</th><th scope="col">EU</th><th scope="col">Chest (cm)</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">S</th><td>46</td><td>92</td></tr>
  </tbody>
</table>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: medium. Rule id: th-has-data-cells (axe-core).