How to fix dlitem on BigCommerce

Steps for BigCommerce

1. 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).
2. Search for `<dt` or `<dd` in your Handlebars template files. Common locations are `templates/components/products/product-view.html` or `templates/components/products/options/`.
3. Locate any `<dt>` or `<dd>` whose parent element is not `<dl>` and change the parent wrapper to `<dl>`, updating both opening and closing tags.
4. Upload or save the edited file, publish the theme, then validate on a product page using the axe DevTools browser extension.

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