Skip to content
StoreA11y

WooCommerce · 1.3.1 Info and Relationships (Level A)

Definition lists are structured incorrectly on WooCommerce

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 WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. 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

woocommerce/single-product/product-attributes.php override

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. 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).