Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Definition lists are structured incorrectly on Shopify

Some <dl> elements contain children other than properly ordered <dt>/<dd> pairs. On a store this is usually the product specification table or the shipping information block, and the association between each label and its value is lost.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. A <dl> may contain only <dt>, <dd>, and <div> wrappers that themselves contain only <dt>/<dd>.
  2. Every <dt> must be followed by at least one <dd>.
  3. If the block is really a two-column table of facts, a <table> with <th scope="row"> is often the clearer structure.
  4. Remove stray <p> or <span> siblings placed directly inside the <dl>.

Where this usually lives

sections/main-product.liquid specification blocks, snippets/product-details.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<dl>
  <div class="spec">
    <dt>Material</dt>
    <dd>100% merino wool</dd>
  </div>
  <div class="spec">
    <dt>Care</dt>
    <dd>Hand wash cold</dd>
  </div>
</dl>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: definition-list (axe-core).