Recommended practice Priority: Minor
Table headers use the scope attribute incorrectly
A table uses the scope attribute in a wrong way, for example on an ordinary data cell or with a value other than row, col, rowgroup or colgroup. This is a recommended practice beyond the WCAG 2.2 AA level.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen readers use scope to tell which header belongs to which cell. When it is wrong, someone listening to a size chart, price table or delivery table may hear the wrong header or none at all, and may pick the wrong size or option.
Who is affected
- screen reader users
- blind and partially sighted shoppers
How to fix it
Use scope only on <th> header cells, and only with the values col, row, colgroup or rowgroup. Remove scope from <td> cells; if a cell really is a header, turn it into a <th>. A simple table with one header row usually needs no scope at all.
On Shopify
Tables usually come from product descriptions or pages written in the rich text editor, or from a size chart app. Fix the HTML in the editor's code view or ask the app developer.
On Shoptet (CZ)
Usually in product descriptions or page texts. Correct the table HTML in the editor's source view; for tables that come from the template, ask Shoptet or a partner.
On PrestaShop
Usually in product descriptions edited in the back office or in a module's templates. Correct the HTML in the description or override the module template in the theme.
On WooCommerce
Usually from product descriptions, a table plugin or the theme. Edit the table HTML in the editor's code view or change the table plugin's header settings.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule scope-attr-valid.
dequeuniversity.com, github.com, www.w3.org