Data table with no header cells

WCAG 1.3.1 (A) · EN 301 549 9.1.3.1

There is a table with data but no <th> cells.

Why it matters

In a properly marked-up table, a screen reader announces "Size: M, Price: £19" as the person moves between cells. Without headers it reads only "M, £19", and they have to remember the column order.

How to fix it

Turn the first row (or column) into <th> and add scope="col" or scope="row".

<tr><td>Size</td><td>Price</td></tr>
<tr><td>M</td><td>£19</td></tr>

<tr><th scope="col">Size</th><th scope="col">Price</th></tr>
<tr><td>M</td><td>£19</td></tr>

On your platform

• Shopify

  Size guide tables are usually written in the rich text editor of the product description; edit the HTML with the "</>" button.

• WooCommerce

  Attribute tables generated by WooCommerce already use th. Check the ones you wrote in the description.

Related

• Form fields with no label
• Option group with no group label
• Heading levels skipped
• Missing main heading, or more than one