Structure & headings

A Definition List Contains the Wrong Elements

When a `<dl>` holds stray elements or terms in the wrong order, screen readers may miss which description belongs to which term.

definition-listWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Why it matters

A definition list (<dl>) pairs a term (<dt>) with its description (<dd>). Screen readers use this to say "list, 4 items" and link each term to its description.

If other elements sit directly inside, or the order is wrong, that pairing can break. People may hear a broken list, the wrong count, or descriptions with no term.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They may hear a wrong item count, or a description with no clear term.	High impact
Low-vision users (magnification)	Affected only if they also use a screen reader. The page often looks fine.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	It's a Level A issue under 1.3.1 Info and Relationships. Australia's Disability Discrimination Act complaints point to WCAG 2.2 AA, as does EN 301 549.	Moderate impact
Conversion	It matters where lists carry key facts, like prices, specs or order details.	Low impact
SEO	Search engines barely notice. Don't sell it as an SEO win.	Low impact
Cost to fix	Usually a quick markup fix. Fix it once in the shared template or component.	High impact

Fixing it in code

Stray element inside the list

Don't

<dl>
  <p>Shipping</p>
  <dd>3 to 5 days</dd>
</dl>

A screen reader says: “List, 1 item. 3 to 5 days”

<dl>
  <dt>Shipping</dt>
  <dd>3 to 5 days</dd>
</dl>

A screen reader says: “List, 1 item. Shipping, 3 to 5 days”

Only <dt>, <dd> or a wrapping <div> may sit directly in a <dl>.

Wrapping a pair for styling

Don't

<dl>
  <span><dt>Colour</dt><dd>Blue</dd></span>
</dl>

A screen reader says: “List, 0 items. Colour Blue”

<dl>
  <div><dt>Colour</dt><dd>Blue</dd></div>
</dl>

A screen reader says: “List, 1 item. Colour, Blue”

A <div> is the only allowed wrapper for a term and its description.

Designer's handoff note

When you design label and value pairs, mark them as a term and description list in your handover notes.

Quick test

Tool

NVDA (opens in a new tab) (free on Windows)

Checklist

Step 1: Turn NVDA on and open the page.
Step 2: Press L to jump to the list.
Step 3: Press the Down arrow through each item.

Pass: You hear each term followed by its description, with the right count.
Fail: You hear a wrong count, or a description without its term.

What a green scan still misses

A scanner checks what sits inside the <dl>. It can't judge whether a definition list was the right choice, or whether terms and descriptions are matched correctly.

Reference

Rule ID: definition-list
Raised by: axe-core: “<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements”
WCAG: 1.3.1 Info and Relationships (opens in a new tab) · Level A · since WCAG 2.0
Other standards: EN 301 549 9.1.3.1 · RGAA 9.3.3
Read more: Deque University: definition-list (opens in a new tab)
Last reviewed: 14 October 2026