<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or elements

Screen readers announce definition lists in a specific way, conveying the relationship between terms (<dt>) and their descriptions (<dd>). When a <dl> element contains invalid direct children — such as <p>, <span>, or <li> elements — or when <dt> and <dd> elements appear in the wrong order, assistive technology cannot reliably parse the list. This primarily affects blind and deafblind users who depend on screen readers to understand content structure.

For example, a screen reader might announce a definition list by saying “definition list with 3 items,” then reading each term followed by its definition. If the markup is malformed, the screen reader may skip items, miscount them, or fail to associate terms with their definitions.

This rule maps to WCAG Success Criterion 1.3.1: Info and Relationships (Level A), which requires that information, structure, and relationships conveyed visually are also available programmatically. A properly structured <dl> ensures the semantic relationship between terms and definitions is preserved in the accessibility tree.

How to Fix It

Follow these rules when building definition lists:

1. Direct children of <dl> must be limited to: <dt>, <dd>, <div>, <script>, or <template> elements. No other elements (like <p>, <span>, <li>, or plain text nodes) should appear as direct children.
2. Ordering matters: One or more <dt> elements must come before one or more <dd> elements. A <dd> should never precede a <dt> within a group.
3. Using <div> as a wrapper: You may wrap a <dt>/<dd> group in a <div> for styling purposes, but each <div> must contain a complete group (at least one <dt> followed by at least one <dd>).
4. No stray content: Don’t place bare text or non-allowed elements directly inside the <dl>.

Examples

Incorrect: Invalid direct child element

The <p> element is not a valid direct child of <dl>.

<dl>
  <p>Beverage Types</p>
  <dt>Coffee</dt>
  <dd>A black hot drink made from roasted beans</dd>
</dl>

Incorrect: Wrong order of <dt> and <dd>

The <dd> element must follow the <dt>, not precede it.

<dl>
  <dd>A black hot drink made from roasted beans</dd>
  <dt>Coffee</dt>
</dl>

Incorrect: <dd> without a preceding <dt>

Every <dd> must be associated with at least one <dt>.

<dl>
  <dd>An orphan definition with no term</dd>
</dl>

Correct: Basic definition list

<dl>
  <dt>Coffee</dt>
  <dd>A black hot drink made from roasted beans</dd>
  <dt>Milk</dt>
  <dd>A white cold drink</dd>
</dl>

Correct: Multiple definitions for a single term

<dl>
  <dt>Coffee</dt>
  <dd>A black hot drink made from roasted beans</dd>
  <dd>A stimulating beverage containing caffeine</dd>
</dl>

Correct: Using <div> to wrap groups

Wrapping <dt>/<dd> groups in <div> elements is valid and useful for styling.

<dl>
  <div>
    <dt>Coffee</dt>
    <dd>A black hot drink made from roasted beans</dd>
  </div>
  <div>
    <dt>Milk</dt>
    <dd>A white cold drink</dd>
  </div>
</dl>

Correct: Multiple terms sharing one definition

<dl>
  <dt>Latte</dt>
  <dt>Café au lait</dt>
  <dd>A coffee drink made with espresso and steamed milk</dd>
</dl>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using description lists

→

W3C Reference

WCAG 2.1 - Using ol, ul and dl for lists

→