Structure & headings

Term and Description Items Sit Outside a Description List

When `<dt>` or `<dd>` items aren't inside a `<dl>`, screen readers can't tell which description belongs to which term, or how many pairs there are.

dlitemWCAG 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 description list pairs terms with their details — like "Size: Large" or "Delivery: 3 days". The <dl> wrapper tells screen readers it's a list, how many items it has, and which parts belong together.

Without the wrapper, the browser may drop the list meaning altogether. People using screen readers hear loose words with no link between a label and its value.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear terms and details as loose text, with no list count and no clear pairing.	High impact
Low-vision users (magnification)	Affected only if they also use a screen reader; the visual layout usually looks the same.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	Structure that is shown visually but not in the code is a WCAG 2.2 Level A issue. Complaints under Australia's Disability Discrimination Act, and EN 301 549 in Europe, point to WCAG.	Moderate impact
Conversion	Product specs and price details often use these lists. Muddled pairs can make shoppers unsure, but it rarely blocks a sale.	Low impact
SEO	Search engines barely notice this. Don't sell it as an SEO win.	Low impact
Cost to fix	Usually a quick fix: add the missing `<dl>` wrapper in the template or component.	High impact

Fixing it in code

Product details

Don't

<div>
  <dt>Size</dt>
  <dd>Large</dd>
  <dt>Colour</dt>
  <dd>Navy</dd>
</div>

A screen reader says: “Size. Large. Colour. Navy.”

<dl>
  <dt>Size</dt>
  <dd>Large</dd>
  <dt>Colour</dt>
  <dd>Navy</dd>
</dl>

A screen reader says: “Description list, 2 items. Size: Large. Colour: Navy.”

The <dl> wrapper tells screen readers it's a list of paired terms and details.

Grouping pairs for styling

Don't

<div class="spec">
  <dt>Weight</dt>
  <dd>2 kg</dd>
</div>

A screen reader says: “Weight. 2 kg.”

<dl>
  <div class="spec">
    <dt>Weight</dt>
    <dd>2 kg</dd>
  </div>
</dl>

A screen reader says: “Description list, 1 item. Weight: 2 kg.”

A <div> may wrap a pair for styling, but only inside a <dl>.

Designer's handoff note

When a design shows label-and-value pairs, like specs or order details, mark them as a description list in the handoff notes.

Quick test

Tool

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

Checklist

Step 1: Turn NVDA on and open the page.
Step 2: Use the arrow keys to read through a set of labels and values.
Step 3: Listen for a list being announced.

Pass: You hear "list" with an item count, and each label is read with its value.
Fail: You hear the labels and values as plain loose text, with no list.

What a green scan still misses

A scanner can find <dt> and <dd> outside a <dl>. It can't find label-and-value pairs built with plain <div>s or tell whether each term has the right description.

Reference

Rule ID: dlitem
Raised by: axe-core: “<dt> and <dd> elements must be contained by a <dl>”
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: dlitem (opens in a new tab)
Last reviewed: 14 October 2026