WCAG A/AA requirement Priority: Minor · experimental check: may need a manual look
A table's title is written inside a table cell
A data table, such as a size chart or price list, has its title in a merged first row of cells instead of in a proper table caption.
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 table's caption when the shopper reaches the table, so they know what it is about. A title inside a cell is read as data instead, which muddles the column structure and makes the numbers harder to follow.
Who is affected
- blind customers
- screen reader users
How to fix it
Move the title out of the table cells into a <caption> element placed right after the opening <table> tag, for example <caption>Size chart, women's T-shirts</caption>, and remove the merged first row (the cell with colspan). Style the caption with CSS if it should look the same as before.
On Shopify
Usually a size chart or table pasted into a product description or page, or generated by an app. Fix the table HTML in the editor's code view, or ask the app developer to output a <caption>.
On Shoptet (CZ)
Usually a table pasted into a product description or article. Fix the table HTML in the editor's source view.
On PrestaShop
Usually a table in a product description, a CMS page or a module. Fix the HTML 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. Check whether the plugin has a table title or caption option that outputs <caption>; otherwise 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 table-fake-caption.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some table headers do not describe any data
WCAG 1.3.1 A
-
A list item is outside a list
WCAG 1.3.1 A
-
Accessibility attributes are misspelt
WCAG 4.1.2 A
-
Some videos or sounds start playing with audio by themselves
WCAG 1.4.2 A