WCAG A/AA requirement Priority: Moderate
Some table headers do not describe any data
A table has header cells (<th>) that are not connected to any data cells, for example an empty header row in a size chart, or a table that uses <th> only to make text bold.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen readers announce headers that lead nowhere or cannot match values to the right header, so a blind shopper may misread a size chart, a price table or delivery options.
Who is affected
- blind customers
- screen reader users
How to fix it
Make sure every <th> (and every element with role="columnheader" or role="rowheader") has data cells in its column or row. Remove empty header cells or turn them into <td>, do not use <th> just for bold text, and keep the rows and columns complete. Tables used only for layout should not contain <th> at all.
On Shopify
Usually a size chart or specification table pasted into a product description, or generated by a size chart or product tabs app. Fix the table HTML in the editor's code view, or ask the app developer.
On Shoptet (CZ)
Usually a table pasted into a product description or article. Fix the table HTML in the editor so that every header has data below it or beside it.
On PrestaShop
Usually a table in a product description, a CMS page or a product features or comparison module. Fix the HTML in the editor or in the module's .tpl template.
On WooCommerce
Usually a table built with a table or size chart plugin, a page builder table widget or HTML pasted into a product description. Check the plugin's header row settings, or fix the table code.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 1.3.1 (A) Info and Relationships |
| WCAG 2.1 | 1.3.1 (A) Info and Relationships |
| WCAG 2.0 | 1.3.1 (A) Info and Relationships |
| EN 301 549 4.1.1 | 9.1.3.1 |
| EN 301 549 3.2.1 | 9.1.3.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.3.1 |
Automated check: axe-core rule th-has-data-cells.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
A list is built incorrectly
WCAG 1.3.1 A
-
Custom controls are missing required information
WCAG 4.1.2 A
-
Accessibility attributes are used in the wrong situation
WCAG 4.1.2 A
-
Custom menus or lists are built incorrectly
WCAG 1.3.1 A