WCAG A/AA requirement Priority: Moderate · experimental check: may need a manual look
Large tables have cells without headers
A larger data table (more than 3 by 3 cells), such as a size chart, a specification table or a shipping price table, has no header cells, so the values are not linked to what they mean.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen readers announce a cell together with its row and column headers, for example "Size L, waist: 84 cm". Without headers, blind shoppers hear only a stream of numbers and cannot tell which size or option each one belongs to.
Who is affected
- blind customers
- screen reader users
How to fix it
Mark the header row, and the first column if it names the rows, with <th> instead of <td>, and add scope="col" or scope="row". Put the header row inside <thead>. For complex tables with several header levels, use id and headers attributes. If the table only arranges content visually, replace it with a CSS layout or add role="presentation".
On Shopify
Usually a size chart or specification table in a product description, or one generated by an app. In the editor's code view, change the first row's <td> cells to <th>, or ask the app developer to output header cells.
On Shoptet (CZ)
Usually a table pasted into a product description or article. In the editor's source view, change the first row's cells to <th>.
On PrestaShop
Usually in a product description, a CMS page or a product features module. Change the header cells to <th> in the editor's source view or in the module's .tpl template.
On WooCommerce
Usually a table plugin or HTML pasted into a product description. Many table plugins have an option to use the first row as a header; switch it on, or fix the table HTML.
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-has-header.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Visitors cannot zoom the page on mobile
WCAG 1.4.4 AA
-
Keyboard users cannot reach some embedded content
WCAG 2.1.1 A
-
Videos have no captions
WCAG 1.2.2 A
-
The page uses outdated blinking-text markup
WCAG 2.2.2 A