Dlitem
Moderate effortFound on 1% of audited stores.
Wrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so description list items have their required container.
What it is
HTML has a special "description list" structure made up of three tags working together: `<dl>` (the list container), `<dt>` (a term or label), and `<dd>` (the description or value for that term). The rule being violated means your page has one or more `<dt>` or `<dd>` elements that are sitting outside of a `<dl>` wrapper — like list items floating in the air with no list around them. This is a structural HTML error that breaks the semantic meaning of the content and violates WCAG 2.x Success Criterion 1.3.1 (Info and Relationships).
Why it matters
Screen readers used by blind and low-vision shoppers rely on correct HTML structure to announce content meaningfully — for example, reading out "Shipping time: 3–5 business days" as a paired term and value. When `<dt>`/`<dd>` elements lack a `<dl>` parent, screen readers cannot convey that relationship, making product specs, FAQs, and shipping information confusing or completely inaccessible for these customers. This directly violates WCAG 2.1 Success Criterion 1.3.1, which is a legal compliance requirement in many jurisdictions (ADA in the US, EN 301 549 in Europe). Beyond legal risk, accessibility failures can cost you customers, damage your reputation, and expose you to demand letters or lawsuits. Fixing this is also a trust signal: Google's crawlers increasingly reward semantically correct, accessible pages.
How to fix it
- Audit your pages for any `<dt>` or `<dd>` tags that are direct children of `<div>`, `<section>`, `<article>`, `<main>`, or any element other than `<dl>` — these are the offending elements.
- Identify the content being marked up: product specifications, glossary terms, FAQs, shipping details, or key-value pairs are common candidates for `<dl>` lists.
- Wrap every related group of `<dt>` and `<dd>` elements with a single `<dl>` opening tag before the first `<dt>` and a closing `</dl>` tag after the last `<dd>`.
- If the broken markup is inside a theme template, page builder block, or custom widget, edit that template/component directly rather than individual pages.
- Validate the corrected HTML using the W3C Markup Validator (validator.w3.org) and re-run your accessibility scanner to confirm the violation is resolved.
- Re-test with a screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on Mac/iOS) to confirm the list structure is announced correctly.
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 'Customize' on your active theme.
- To edit template files directly: from the theme editor click the three-dot menu → 'Edit code'.
- Search across all Liquid files (sections/, templates/, snippets/) for `<dt` or `<dd` using the search box at the top of the code editor.
- For each occurrence, check whether the nearest ancestor element in the file is a `<dl>`. If it is a `<div>`, `<ul>`, or anything else, add `<dl>` immediately before the first `<dt>` and `</dl>` immediately after the last `<dd>` in that group.
- Common locations: product description sections (sections/main-product.liquid or product.liquid), FAQ sections, and custom metafield templates.
- Save each file and preview the page; use browser DevTools Elements panel to confirm the DOM structure.
How to fix dlitem on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SFTP).
- Search your active theme's PHP and template files for `<dt` or `<dd` — common locations are single-product.php, woocommerce/templates/single-product/tabs/, and any custom shortcode output.
- Also search any active plugins that render product attributes or FAQs, as they may output `<dt>`/`<dd>` tags.
- Wrap orphaned `<dt>`/`<dd>` elements with `<dl>` … `</dl>` in the appropriate template file.
- If you cannot edit plugin templates directly, use a child theme template override: copy the plugin template into your child theme under the same directory path and edit that copy.
- Clear any caching plugins (WP Rocket, W3 Total Cache, etc.) after saving, then re-validate.
How to fix dlitem on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme (Stencil).
- Use the search functionality to look for `<dt` or `<dd` across all Handlebars (.html) template files, particularly in templates/components/products/ and templates/pages/.
- Identify any `<dt>` or `<dd>` not nested inside a `<dl>` and add the missing `<dl>` wrapper.
- Save changes and use BigCommerce's live preview to verify the rendered HTML structure using browser DevTools.
- If the issue is in a custom widget, go to Page Builder, find the widget, and edit its HTML template or custom HTML block directly.
How to fix dlitem on Wix
- Open the Wix Editor for your site and locate the section or page where the scanner flagged the issue.
- If the content was added via a 'HTML Embed' or custom code widget: click the element → 'Enter Code' → find the `<dt>` or `<dd>` tags and add the `<dl>` wrapper around them.
- If the content is in a Wix app (e.g., Wix FAQ app, Wix Stores product description): check whether the app outputs accessible HTML — if not, consider replacing with a custom HTML Embed block where you control the markup.
- For Wix Studio sites, use the Dev Mode code editor to inspect and edit custom components that render description list content.
- After editing, use browser DevTools (Inspect Element) on the published or previewed page to verify `<dt>` and `<dd>` are children of `<dl>`.
How to fix dlitem on Squarespace
- In your Squarespace admin, go to the page with the issue and open the page editor.
- If the offending markup is in a 'Code Block': click the block → Edit → find any `<dt>` or `<dd>` tags and wrap them in `<dl>` … `</dl>`.
- For site-wide code injected via Settings → Advanced → Code Injection (Header/Footer): review that code for orphaned `<dt>`/`<dd>` elements and add `<dl>` wrappers.
- If the issue is in theme-generated output (e.g., product detail pages), you may need to add CSS to restyle a different semantic element, or use a Code Block with correctly structured `<dl>` markup to replace the problematic content.
- Save changes, preview the page, and inspect the DOM with browser DevTools to confirm the fix.
How to fix dlitem on Webflow
- Open your Webflow Designer and navigate to the page or global component (Symbol) containing the flagged content.
- In the Navigator panel, look for any `DT` or `DD` elements. Check their parent: if the parent is a `Div Block` or anything other than a `DL` element, the structure is wrong.
- To fix: select the group of `DT`/`DD` elements, then wrap them by adding a new element. In the Add Elements panel, search for 'dl' — Webflow supports native `<dl>`, `<dt>`, and `<dd>` elements under the 'Typography' or 'HTML Elements' section.
- Place a `DL` element where the group should be, then move each `DT` and `DD` into it using drag-and-drop in the Navigator.
- If this is inside a CMS Collection List, edit the Collection Item component and restructure the bound fields to output inside a `DL` wrapper.
- Publish the site and verify with browser DevTools.
How to fix dlitem on Adobe Commerce (Magento)
- Identify which template file renders the offending `<dt>`/`<dd>` elements. Use Magento's template hints (Stores → Configuration → Advanced → Developer → Debug → Enable Template Path Hints) to find the exact .phtml file.
- Navigate to the file in your custom theme under app/design/frontend/[Vendor]/[theme]/. If the file only exists in a module's view/frontend/templates/, copy it into your theme's override path first.
- Open the .phtml file, locate the `<dt>` or `<dd>` tags, and add the appropriate `<dl>` … `</dl>` wrapper.
- Common files to check: Magento_Catalog/templates/product/view/attributes.phtml (product attributes tab), and any custom block templates for FAQs or specifications.
- After saving, run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` if needed, then verify in browser DevTools.
How to fix dlitem on WordPress.org
- Identify the source of the markup: is it your theme, a page builder (Elementor, Divi, Beaver Builder), or a plugin?
- For theme files: go to Appearance → Theme File Editor, or edit via FTP, and search for `<dt` / `<dd` in your child theme's PHP files.
- For Elementor: use the 'HTML' widget or the 'Text Editor' widget's HTML mode to locate and fix the markup; alternatively, use Elementor's custom code blocks.
- For Divi: open the affected module in the Divi Builder, switch to 'Text' mode in the content area, and add `<dl>` wrappers around bare `<dt>`/`<dd>` tags.
- For Gutenberg blocks: if using a custom HTML block, edit the block directly; if using a third-party block plugin that outputs bad HTML, contact the plugin author or replace the block with a Custom HTML block using correct markup.
- After fixing, flush permalinks (Settings → Permalinks → Save) and any caching, then retest.
Does your site have this issue?
Run a free SEOLZ scan to find dlitem — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Dlitem?
HTML has a special "description list" structure made up of three tags working together: `<dl>` (the list container), `<dt>` (a term or label), and `<dd>` (the description or value for that term). The rule being violated means your page has one or more `<dt>` or `<dd>` elements that are sitting outside of a `<dl>` wrapper — like list items floating in the air with no list around them. This is a structural HTML error that breaks the semantic meaning of the content and violates WCAG 2.x Success Criterion 1.3.1 (Info and Relationships).
Why does dlitem matter?
Screen readers used by blind and low-vision shoppers rely on correct HTML structure to announce content meaningfully — for example, reading out "Shipping time: 3–5 business days" as a paired term and value. When `<dt>`/`<dd>` elements lack a `<dl>` parent, screen readers cannot convey that relationship, making product specs, FAQs, and shipping information confusing or completely inaccessible for these customers. This directly violates WCAG 2.1 Success Criterion 1.3.1, which is a legal compliance requirement in many jurisdictions (ADA in the US, EN 301 549 in Europe). Beyond legal risk, accessibility failures can cost you customers, damage your reputation, and expose you to demand letters or lawsuits. Fixing this is also a trust signal: Google's crawlers increasingly reward semantically correct, accessible pages.
How do I fix dlitem?
Wrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so description list items have their required container.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI