Definition lists communicate the relationship between terms and their corresponding definitions. For assistive technologies to interpret these relationships accurately, the <dl> element must follow strict structural rules. Only <dt> and <dd> elements may appear as direct children of <dl>, and they must be in the correct order. <script>, <template>, and <div> elements may also appear, but their presence cannot disrupt the sequence of <dt> followed by <dd>. When unrelated tags or disordered elements appear within a <dl>, assistive technologies cannot determine which content is a term and which is its definition. This leads to uncertainty and loss of meaning for users relying on screen readers.
This requirement ensures definition lists are built according to the HTML specification so users receive clear, consistent, and predictable interpretation.
WCAG Success Criteria
The importance of correct <dl> structure is reinforced by multiple WCAG requirements.
WCAG 1.3.1 Info and Relationships (Level A) ensures relationships within content are programmatically determinable. If the <dt> and <dd> pattern is not followed correctly, screen readers cannot accurately express which definition belongs to which term.
WCAG 4.1.2 Name, Role, Value (Level A) requires interface components to expose proper roles and relationships. A malformed <dl> breaks the expected term–definition relationship and reduces clarity for assistive technologies.
WCAG 4.1.1 Parsing (Level A) highlights the importance of proper structure within HTML. Any unexpected children or ordering inside a <dl> can interrupt parsing and diminish the accessibility of the component.
What Proper <dl> Structure Looks Like
A correct definition list contains a sequence where each <dt> term is immediately followed by one or more <dd> definitions. All terms and definitions must remain, direct children of the <dl> element unless grouped inside a <div> without disrupting their order. No other HTML elements should appear directly inside <dl>.
Correct example:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>Incorrect example:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<div>
<dt>Milk</dt>
<dd>White cold drink</dd>
</div>
</dl>Although visually similar, the incorrect example separates <dt> and <dd> from the <dl>, which breaks the semantic reading order for assistive technologies.
Why This Matters
Screen readers have a specific method for announcing definition lists. When the <dt> and <dd> sequence is correct, the user hears a term followed by its definition, supporting clarity, understanding, and efficient navigation. When the sequence is broken, users may hear terms without definitions, definitions without context, or lists read as unrelated text. This increases confusion and makes the information less usable. Definition lists are frequently used in glossaries, product specifications, documentation, and attribute displays, so accuracy is essential for comprehension.
How to Fix the Problem
Check every <dl> on the page and confirm that only <dt>, <dd>, <script>, <template>, or <div> tags are direct children. Ensure that every <dt> is immediately followed by one or more <dd> elements. Rearrange or remove elements that disrupt the expected structure. If visual layout grouping is required, a <div> may be used around related <dt> and <dd> pairs as long as the term–definition sequence remains intact.
Who Is Affected
Users of screen readers and other assistive technologies rely on strong semantic structure to interpret content correctly. Keyboard-only users also depend on predictable navigation patterns. When the internal structure of a <dl> is broken, both groups experience reduced clarity, increased cognitive effort, and potential misunderstanding of the information presented.
Rule Description
A <dl> must contain only properly ordered <dt> and <dd> groups, with optional <script>, <template>, or <div> elements. A <dt> must always be followed by its associated <dd> elements. Any structure that deviates from this pattern fails to communicate the meaning of a definition list.
The Algorithm
This rule checks every <dl> element. It verifies that its direct children are allowed elements. It confirms that <dt> terms appear before their corresponding <dd> definitions. If the expected structure is missing or out of order, the definition list does not meet accessibility requirements.
Wrapping Up
Definition lists provide a powerful way to communicate structured information, but only when their required formatting is followed. By ensuring that <dt> and <dd> elements are correctly paired and directly contained within the <dl>, developers allow assistive technologies to present terms and definitions with clarity and confidence. Proper markup supports understanding, navigation, and accessibility for all users.
