How to fix dlitem on Squarespace

Steps for Squarespace

1. In your Squarespace admin, go to Pages → select the affected page → click Edit.
2. 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.
3. 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.
4. 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>`.
5. Save and publish, then verify with axe DevTools on the live page.

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