Recommended practice Priority: Minor
A table header cell is empty
A table has a header cell with no text, for example the top-left corner of a size chart or a column of action buttons. This is a recommended practice, not a WCAG AA requirement.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
When a screen reader user moves through a table, the header is read before each value to explain what it means. An empty header leaves values without context, so a size chart, price comparison or order history becomes harder to understand.
Who is affected
- screen reader users
- blind people
- people with low vision using screen magnifiers with speech
How to fix it
Give every <th> (or element with role="columnheader" or "rowheader") text that describes its column or row, such as "Size" or "Actions". If the text should not be visible, use visually hidden text instead of leaving the cell empty. If the cell is not really a header, for example an empty corner cell, use <td> instead of <th>.
On Shopify
Tables usually come from product descriptions, size chart pages or apps. Edit the table in the rich text editor or the app so every header cell has text; for tables built by the theme, fix the Liquid template.
On Shoptet (CZ)
Usually comes from tables in product descriptions or text pages. Edit the table in the editor and fill in the header cells; for tables in the template itself, ask Shoptet or a partner.
On PrestaShop
Can appear in product descriptions, comparison pages and customer account templates. Edit the content in the back office or override the theme's .tpl file.
On WooCommerce
Common in size chart, comparison and table plugins and in account pages such as order history. Fill in the header in the plugin's settings or override the template in a child theme.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule empty-table-header.
dequeuniversity.com, github.com, www.w3.org