WCAG A/AA requirement Priority: Minor
A label-and-value list is built incorrectly
A description list (<dl>), often used for product specifications or chosen options, contains elements in the wrong place or order.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users may not hear which value belongs to which label, for example which number is the weight and which is the size, so product details are harder to understand.
Who is affected
- screen reader users
How to fix it
Inside a <dl>, put only groups of <dt> (label) and <dd> (value), in that order: each group starts with one or more <dt> followed by one or more <dd>. A <div> may wrap a whole group; <script> and <template> are also allowed. Move any other elements inside a <dt> or <dd>.
On Shopify
Less common; usually in custom specification sections, metafield blocks or app markup. Fix the structure in the theme's Liquid sections or snippets.
On Shoptet (CZ)
Product parameters are rendered by the template. Report it to Shoptet or a partner.
On PrestaShop
Themes often show product features as a <dl>; customised themes may break the structure. Fix the markup in the theme's product .tpl files.
On WooCommerce
WooCommerce shows chosen product options in the cart and order details as a <dl>; themes or plugins that override these templates can break it. Fix it in the child-theme template or report it to the plugin author.
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 definition-list.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some table cells point to the wrong headers
WCAG 1.3.1 A
-
The page's language setting is wrong
WCAG 3.1.1 A
-
Custom menus or lists are built incorrectly
WCAG 1.3.1 A
-
Some expandable sections have no name
WCAG 4.1.2 A