How to fix dlitem on WooCommerce
Wrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so screen readers can correctly announce the list structure.
Steps for WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit via FTP/SFTP).
- Search for `<dt` or `<dd` inside your active theme's template files. Common culprits are `woocommerce/templates/single-product/product-attributes.php` or a copied override in `yourtheme/woocommerce/single-product/product-attributes.php`.
- To safely override the WooCommerce core template without losing changes on plugin updates, copy `wp-content/plugins/woocommerce/templates/single-product/product-attributes.php` to `wp-content/themes/your-child-theme/woocommerce/single-product/product-attributes.php`.
- Open the copied file and confirm the `<dt>` and `<dd>` elements are children of a `<table>` or `<dl>`. If they are orphaned, wrap them in `<dl>...</dl>`.
- Save the file and use the axe DevTools browser extension on the product page to verify the fix.
<!-- ❌ WRONG: dt/dd without a dl parent -->
<div class="product-meta">
<dt>Color</dt>
<dd>Blue</dd>
<dt>Material</dt>
<dd>Cotton</dd>
</div>
<!-- ✅ CORRECT: dt/dd wrapped in a dl -->
<dl class="product-meta">
<dt>Color</dt>
<dd>Blue</dd>
<dt>Material</dt>
<dd>Cotton</dd>
</dl>
<!-- ✅ ALSO VALID (HTML5): pairs wrapped in divs inside dl -->
<dl class="product-meta">
<div>
<dt>Color</dt>
<dd>Blue</dd>
</div>
<div>
<dt>Material</dt>
<dd>Cotton</dd>
</div>
</dl>What is dlitem?
HTML has a special "description list" structure made up of three tags: `<dl>` (the list container), `<dt>` (a term or name), and `<dd>` (the definition or description of that term). The rule is that `<dt>` and `<dd>` items must always live *inside* a `<dl>` parent — they cannot float on their own or be placed inside a `<div>`, `<p>`, or any other container. When `<dt>` or `<dd>` tags appear without a `<dl>` wrapper, the HTML is invalid and the browser cannot present that content as a meaningful list to assistive technologies.
Screen readers (used by people who are blind or have low vision) rely on the `<dl>` container to announce "description list" and read term/description pairs in a way that makes sense. Without the wrapper, a screen reader user hears a jumble of disconnected words with no structural context — they cannot tell that "Color" goes with "Blue" or that "SKU" goes with "ABC-123." This directly violates WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which is a Level A requirement — the lowest bar for accessibility conformance. Failing Level A criteria exposes your store to legal risk under laws like the ADA (US), AODA (Canada), and EAA (EU). It also signals to Google that your page markup is malformed, which can subtly harm how well Googlebot understands and trusts your page content.
See the complete Dlitem guide for every platform and the full background.
Not sure if your WooCommerce store has this?
Run a free SEOLZ audit — we’ll find dlitem and every other issue across your whole site.
Scan my site free