Definition list
Moderate effortFound on 2% of audited stores.
Ensure every `<dl>` (definition list) element contains only properly nested `<dt>` and `<dd>` children, with no stray text, divs, or other elements placed directly inside it.
What it is
A definition list (`<dl>`) is an HTML structure designed to pair terms with their descriptions — for example, a product's "Material: Cotton" or "Size: Large." The rules for what goes inside a `<dl>` are strict: it may only contain `<dt>` (definition term) elements and `<dd>` (definition description) elements, optionally wrapped in `<div>` groupings. When other tags or loose text are placed directly inside a `<dl>`, the list is considered malformed. Screen readers and assistive technologies rely on this structure to announce the relationship between a term and its value to users who cannot see the page visually. WCAG Success Criterion 1.3.1 ("Info and Relationships") requires that structure conveyed visually is also conveyed in the code.
Why it matters
Screen reader users — including many customers with visual impairments — depend on correctly structured definition lists to understand product specifications, FAQs, shipping details, and other paired information. A malformed `<dl>` causes screen readers to either skip content or announce it in a confusing, meaningless order, making it impossible for those customers to complete a purchase. Beyond conversions, non-compliance with WCAG 1.3.1 carries real legal risk: accessibility lawsuits against ecommerce stores are rising sharply, and a broken definition list is exactly the kind of machine-detectable violation that appears in demand letters. Fixing it also signals code quality to search engines, which increasingly factor accessibility into rankings.
How to fix it
- Audit your pages for every `<dl>` element — common locations include product specification tables, FAQ sections, glossaries, and order summary blocks.
- Ensure each `<dl>` contains only `<dt>`, `<dd>`, or `<div>` (as a grouping wrapper) as direct children — remove or relocate any `<p>`, `<span>`, `<h2>`–`<h6>`, plain text nodes, or other tags placed directly inside the `<dl>`.
- Make sure every `<dt>` is immediately followed by at least one `<dd>` (one term may have multiple descriptions, but no `<dd>` should appear without a preceding `<dt>`).
- If you need a grouping wrapper (e.g. for CSS layout), wrap each `<dt>`/`<dd>` pair inside a `<div>` directly inside the `<dl>` — this is the only block-level element allowed as a direct child.
- After editing, validate the markup with the W3C HTML Validator and re-run an axe accessibility scan to confirm the `definition-list` rule passes.
- Test with a free screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) to verify that terms and descriptions are announced correctly.
Fix it on your platform
Pick your platform for the exact steps.
How to fix definition list on Shopify
- In your Shopify admin, go to Online Store → Themes → click Actions → Edit Code on your active theme.
- Search across theme files (sections/, snippets/, templates/) for `<dl` using the search box at the top of the file list.
- Common culprits: product.liquid or product-template.liquid (product specs), faq.liquid or collapsible-content.liquid (FAQs), cart.liquid (order summaries).
- Open each file containing a `<dl>` and edit the HTML directly in the code editor to ensure only `<dt>`, `<dd>`, or wrapping `<div>` elements appear as direct children.
- If a third-party app renders the `<dl>` (e.g. a product specs app), check that app's settings or contact its support — you may not be able to edit its output directly.
- Click Save, preview the page, and re-run an axe browser extension scan to verify the fix.
How to fix definition list on Shopify Plus
- Follow the same steps as Shopify above; Plus merchants may also have custom checkout pages — check checkout.liquid for any `<dl>` usage and apply the same structural fixes.
- Use the GitHub integration (if connected) to search across all theme files for `<dl` and submit corrections via a pull request for version control.
How to fix definition list on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SSH).
- Search your active (child) theme's template files for `<dl` — key files: woocommerce/single-product/tabs/additional-information.php (product attributes), woocommerce/order/order-details.php (order details).
- Edit the PHP/HTML in those templates to ensure the `<dl>` contains only `<dt>` and `<dd>` (or `<div>` wrappers) as direct children.
- If WooCommerce core templates are the source, copy the template file into your child theme under woocommerce/ and edit the copy (never edit plugin files directly).
- Install and run the free WP Accessibility plugin or axe DevTools browser extension to verify the fix after saving.
How to fix definition list on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes → click Customize on your active theme, then choose Edit Theme Files (or use the Stencil CLI for local development).
- Search your Handlebars templates (.html files under templates/components/ and templates/pages/) for `<dl`.
- Common locations: templates/components/products/product-view.html (product specs), templates/pages/order-confirmation.html.
- Edit the Handlebars template directly to correct the `<dl>` structure, then save and apply.
- Preview and validate with the axe browser extension.
How to fix definition list on Wix
- Open the Wix Editor for your site. Wix generates most HTML automatically, so you cannot edit raw `<dl>` tags in a standard Wix site.
- If a definition list appears in a Wix app or widget (e.g. Wix Stores product page), check for an app update or contact Wix Support to report the accessibility issue — Wix controls the underlying output.
- For custom content you added via the HTML embed widget (Add → Embed → Custom Code / HTML iFrame), click that widget, open the HTML editor, and correct the `<dl>` structure there.
- For Wix Studio sites, use the Dev Mode / Velo code panel to inspect and correct any custom-coded `<dl>` blocks.
How to fix definition list on Wix Studio
- Open Wix Studio and enable Dev Mode (toggle in the top bar).
- In the Pages & Panels sidebar, locate the page or section containing the malformed `<dl>` and open its code.
- Correct the HTML/JSX structure in the custom code block, ensuring only `<dt>`, `<dd>`, or wrapping `<div>` elements are direct children of `<dl>`.
- Publish the site and verify with the axe browser extension.
How to fix definition list on Squarespace
- Squarespace does not expose raw HTML for most blocks. If the malformed `<dl>` is inside a Code Block, go to the page in the Editor, click the Code Block, and edit the HTML directly.
- If the `<dl>` is generated by a Squarespace built-in block (e.g. a product page), you cannot edit it directly — inject corrective CSS or report it to Squarespace Support.
- For custom injected code, go to Settings → Advanced → Code Injection and locate any `<dl>` markup in the header/footer injection fields; correct it there.
- Publish and verify with the axe DevTools browser extension.
How to fix definition list on Webflow
- Open the Webflow Designer for your project.
- Use the Navigator panel (left sidebar) or Ctrl/Cmd+F to find any DL elements on your canvas.
- Click the `<dl>` element and inspect its children in the Navigator — remove or restructure any direct children that are not `<dt>`, `<dd>`, or `<div>` wrappers.
- To add or change child elements, use the Add Element panel (+) and drag DT or DD elements inside the DL.
- Publish the site and run an axe browser extension scan on the live URL to confirm the fix.
How to fix definition list on Adobe Commerce (Magento)
- SSH into your server and locate the relevant PHTML template — common files: app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/view/attributes.phtml (product attributes) and Magento_Sales/templates/order/items.phtml.
- If no override exists in your theme, copy the core template into your custom theme directory first (never edit vendor/ files).
- Open the PHTML file and correct the `<dl>` HTML structure so only `<dt>`, `<dd>`, or `<div>` wrappers are direct children.
- Run `bin/magento cache:flush` after saving, then verify the fix with the axe browser extension on the storefront.
How to fix definition list on Magento Open Source
- Follow the same steps as Adobe Commerce above — the template file paths and cache-flush command are identical for Magento Open Source.
How to fix definition list on PrestaShop
- Via FTP or your hosting file manager, navigate to themes/<your-theme>/templates/ and search for files containing `<dl`.
- Common locations: catalog/product.tpl (product details), checkout/ templates.
- Edit the Smarty (.tpl) template file to correct the `<dl>` structure, ensuring only `<dt>` and `<dd>` (or `<div>` wrappers) are direct children.
- Clear the PrestaShop cache under Advanced Parameters → Performance → Clear cache, then verify with axe.
How to fix definition list on Headless / Custom (I build in code)
- Search your component library/source files for `<dl` (or `dl` JSX elements in React/Vue/Svelte).
- Audit each component's render output: direct children of `<dl>` must be only `<dt>`, `<dd>`, or `<div>` elements.
- Fix the component source, run your build, and verify with `axe-core` in your test suite (e.g. jest-axe) and the axe browser extension in the browser.
Does your site have this issue?
Run a free SEOLZ scan to find definition list — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Definition list?
A definition list (`<dl>`) is an HTML structure designed to pair terms with their descriptions — for example, a product's "Material: Cotton" or "Size: Large." The rules for what goes inside a `<dl>` are strict: it may only contain `<dt>` (definition term) elements and `<dd>` (definition description) elements, optionally wrapped in `<div>` groupings. When other tags or loose text are placed directly inside a `<dl>`, the list is considered malformed. Screen readers and assistive technologies rely on this structure to announce the relationship between a term and its value to users who cannot see the page visually. WCAG Success Criterion 1.3.1 ("Info and Relationships") requires that structure conveyed visually is also conveyed in the code.
Why does definition list matter?
Screen reader users — including many customers with visual impairments — depend on correctly structured definition lists to understand product specifications, FAQs, shipping details, and other paired information. A malformed `<dl>` causes screen readers to either skip content or announce it in a confusing, meaningless order, making it impossible for those customers to complete a purchase. Beyond conversions, non-compliance with WCAG 1.3.1 carries real legal risk: accessibility lawsuits against ecommerce stores are rising sharply, and a broken definition list is exactly the kind of machine-detectable violation that appears in demand letters. Fixing it also signals code quality to search engines, which increasingly factor accessibility into rankings.
How do I fix definition list?
Ensure every `<dl>` (definition list) element contains only properly nested `<dt>` and `<dd>` children, with no stray text, divs, or other elements placed directly inside it.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN