HTML has a special "description list" structure made up of three tags: ` ` (the list container), ` ` (a term or name), and ` ` (the definition or description of that term). The rule is that ` ` and ` ` items must always live *inside* a ` ` parent — they cannot float on their own or be placed inside a ` `, ` `, or any other container. When ` ` or ` ` tags appear without a ` ` wrapper, the HTML is invalid and the browser cannot present that content as a meaningful list to assistive technologies.

Wrap every ` ` (term) and ` ` (description) element inside a parent ` ` element so screen readers can correctly announce the list structure.

Dlitem

Quick win

Wrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so screen readers can correctly announce the list structure.

What it is

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.

Why it matters

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.

How to fix it

Identify every `<dt>` and `<dd>` element on the page using your browser's DevTools (F12 → Elements tab) or a code search for those tags in your theme/template files.
Check each one: is it directly inside a `<dl>` element? If not, that is the broken instance.
Add an opening `<dl>` tag immediately before the first `<dt>` or `<dd>` in the orphaned group, and a closing `</dl>` tag immediately after the last one in that group.
Ensure the only direct children of `<dl>` are `<dt>`, `<dd>`, or `<div>` (wrapping pairs together is valid in HTML5). Never nest a `<dl>` directly inside another `<dl>` without proper structure.
Validate the corrected markup using the W3C Markup Validation Service (validator.w3.org) to confirm no remaining errors.
Re-run your accessibility scanner (e.g., axe DevTools browser extension) on the affected page to confirm the `dlitem` rule no longer triggers.

<!-- ❌ 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>

Fix it on your platform

Pick your platform for the exact steps.

How to fix dlitem on Shopify

In your Shopify admin, go to Online Store → Themes → click the three-dot menu on your active theme → Edit code.
Use the search box (top-left of the code editor) to search for `<dt` or `<dd` across all Liquid template files.
The most common locations are `sections/product-template.liquid`, `snippets/product-meta.liquid`, or a custom `snippets/` file that renders specifications or metafields.
When you find a `<dt>` or `<dd>` whose immediate parent is not `<dl>` (e.g., it is inside a `<div>` or `<ul>`), change the outer wrapper tag from `<div>` (or whatever it is) to `<dl>` — update both the opening and closing tags.
Click Save, then preview the page and re-run axe DevTools to confirm the issue is resolved.

Full Shopify guide →Official Shopify docs ↗

How to fix dlitem on 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.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix dlitem on BigCommerce

In your BigCommerce admin, go to Storefront → My Themes → click Customize on your active theme → click Edit Theme Files (or download the theme to edit locally).
Search for `<dt` or `<dd` in your Handlebars template files. Common locations are `templates/components/products/product-view.html` or `templates/components/products/options/`.
Locate any `<dt>` or `<dd>` whose parent element is not `<dl>` and change the parent wrapper to `<dl>`, updating both opening and closing tags.
Upload or save the edited file, publish the theme, then validate on a product page using the axe DevTools browser extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix dlitem on Wix

Open the Wix Editor and navigate to the page containing the flagged content.
Wix does not expose raw HTML for standard widgets; however, if the `<dt>`/`<dd>` tags come from a Wix HTML Embed element (Add → Embed → HTML iframe or Embed Code), click that element and select Edit Code.
In the HTML embed code panel, locate the orphaned `<dt>` or `<dd>` tags and wrap them in `<dl>...</dl>`.
If the markup is generated by a Wix app or dynamic dataset, contact the app developer or use a Velo (Wix Code) custom component to correct the structure.
Click Apply, publish your site, and re-test with axe DevTools.

Full Wix guide →Official Wix docs ↗

How to fix dlitem on Squarespace

In your Squarespace admin, go to Pages → select the affected page → click Edit.
If the `<dt>`/`<dd>` tags are inside a Code Block, click the block, select Edit, and update the HTML to wrap orphaned `<dt>`/`<dd>` tags in a `<dl>` element.
If the tags come from a theme template, go to Design → Custom CSS for minor style tweaks; for structural HTML changes, use Settings → Advanced → Code Injection (site-wide) or the per-page Code Injection panel (available on Business plan and above) — but note that full template editing is not available on all plans.
On Developer-enabled Squarespace sites, edit the relevant `.region` or `.block` template file via the Squarespace Developer platform (local development with the Squarespace CLI), wrapping the orphaned tags in `<dl>`.
Save and publish, then verify with axe DevTools on the live page.

Full Squarespace guide →Official Squarespace docs ↗

How to fix dlitem on Webflow

Open your project in the Webflow Designer and navigate to the page with the flagged element.
In the Navigator panel (left sidebar), find the element containing the `<dt>` or `<dd>` tag. Webflow uses 'Definition Term' and 'Definition Description' element types, which are built-in.
Select the parent container of the orphaned `<dt>`/`<dd>` element. In the Element Settings panel (right sidebar), check its tag. If it is not `<dl>`, click the tag selector and change it to `DL` (Description List).
Alternatively, delete the orphaned items and re-add them properly: in Add Elements (left sidebar, +), search for 'Definition List' and drag it onto the canvas, then add 'Definition Term' and 'Definition Description' elements inside it.
Publish the site and verify with axe DevTools.

Full Webflow guide →Official Webflow docs ↗

How to fix dlitem on Adobe Commerce (Magento)

Connect to your server via FTP/SFTP or use the admin's built-in template tools (if enabled).
Search your active theme directory (`app/design/frontend/Vendor/ThemeName/`) for files containing `<dt` or `<dd`. Common files include `Magento_Catalog/templates/product/view/attributes.phtml` and any custom `.phtml` snippets.
To override a core template safely, copy `vendor/magento/module-catalog/view/frontend/templates/product/view/attributes.phtml` to `app/design/frontend/Vendor/ThemeName/Magento_Catalog/templates/product/view/attributes.phtml`.
Open the copied file, locate any `<dt>` or `<dd>` elements without a `<dl>` parent, and add the `<dl>` wrapper around them.
Run `bin/magento cache:flush` from the command line, then test on a product page using axe DevTools.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find dlitem — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Dlitem?

Why does dlitem matter?

How do I fix dlitem?