Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Table cells reference headers that do not exist on Shopify

Some table cells use a headers attribute pointing at ids that are absent from the same table. The association silently fails, so the cell is announced with no context at all — worse than having no headers attribute, because the markup looks correct.

Which WCAG criterion this fails

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

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Every id listed in a headers attribute must belong to a <th> in the same table.
  2. For a simple table, delete the headers attributes and use scope="col"/scope="row" instead — far less to keep in sync.
  3. Only reach for headers="…" when cells span multiple rows or columns and scope cannot express the relationship.
  4. If the table is generated by a metafield or an app, fix it at the source; a theme edit will be overwritten.

Where this usually lives

Rich-text tables pasted into product descriptions, custom Liquid blocks

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Broken: no <th id="size"> exists -->
<td headers="size">M</td>

<!-- Simple tables: use scope instead -->
<th scope="col" id="size">Size</th>
<td>M</td>

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: td-headers-attr (axe-core).