How to fix definition list on Headless / Custom (I build in code)

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.

Steps for Headless / Custom (I build in code)

  1. Search your component library/source files for `<dl` (or `dl` JSX elements in React/Vue/Svelte).
  2. Audit each component's render output: direct children of `<dl>` must be only `<dt>`, `<dd>`, or `<div>` elements.
  3. 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.
Official Headless / Custom (I build in code) documentation ↗

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.

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.

See the complete Definition list guide for every platform and the full background.

Not sure if your Headless / Custom (I build in code) store has this?

Run a free SEOLZ scan — we’ll find definition list and every other issue across your whole site.

Scan my site free

Fix definition list on another platform