WCAG A/AA requirement Priority: Moderate
Some table cells point to the wrong headers
A table, for example a size chart, a specification table or a shipping price table, links its cells to their headers with the headers attribute, but some of those links point to something that is not a header cell in the same table.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen readers use these links to announce a value together with its headers, for example "Size M, chest: 96 cm". When the links are broken, blind shoppers hear numbers without knowing what they belong to and may choose the wrong size or option.
Who is affected
- blind customers
- screen reader users
How to fix it
Every ID listed in a cell's headers attribute must belong to a <th> in the same table, and a cell must not point to itself. Fix wrong or missing IDs. For simple tables it is often easier to remove the headers attributes completely and mark headers with <th scope="col"> and <th scope="row">, which screen readers understand without extra links.
On Shopify
Usually a size chart or specification table pasted into a product description or page, or generated by a size chart 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; most simple tables need only <th> cells and no headers attribute.
On PrestaShop
Usually a table in a product description, a CMS page or a product features 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, or HTML pasted into a product description. Check the plugin's accessibility options, or fix the IDs in 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 td-headers-attr.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
The page does not say which language it is in
WCAG 3.1.1 A
-
Accessibility attributes have wrong values
WCAG 4.1.2 A
-
Some switches and checkboxes have no name
WCAG 4.1.2 A
-
Some vector graphics have no text description
WCAG 1.1.1 A