Definition lists must be structured correctly

Rule dl-structure · Structure & semantics · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A <dl> conveys term/description pairs. Other elements directly inside it break the programmatic association between terms and their descriptions.

How to fix#

Use only <dt>, <dd> (and optional grouping <div> wrappers that contain dt/dd pairs) as children of <dl>. role="presentation" on unavoidable decorative children keeps the list valid.

Example#

<dl><p>Term</p></dl>

<dl><dt>Term</dt><dd>Description</dd></dl>

Example#

<dl><div><p>What is X?</p><p>X is …</p></div></dl>

<dl><div><dt>Term</dt><dd>Description</dd></div></dl>

A <div> inside <dl> is only valid as a wrapper for dt/dd groups.

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• MDN — dl