definition-list
Web validation
<dl> elements must only directly contain properly ordered <dt> and <dd> groups, <script> or <template> elements, or <div> elements that wrap <dt> and <dd> groups.Screen readers rely on the strict structure of a description list to announce terms and their descriptions in the right order. When a <dl> contains anything other than <dt> or <dd>, or when those parts are out of sequence, assistive technology can mis-interpret the list or produce confusing output, leaving assistive technology users without or with vague essential context.
Pass Patterns
A properly structured description list
Each term (<dt>) is immediately followed by its description (<dd>).
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt>SSR</dt>
<dd>Server-Side Rendering</dd>
</dl>Multiple terms
Multiple terms share one definition, still keeping order.
<dl>
<dt>WCAG</dt>
<dt>Web Content Accessibility Guidelines</dt>
<dd>International recommendations for accessible web content.</dd>
</dl>Fail Patterns
An element that does not match the description list semantics
A foreign element (<li>) breaks the list’s proper semantics.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<li>Tea – green or black</li> <!-- ❌ not allowed -->
</dl>Definition and term are misordered
Definitions come before their terms.
<dl>
<dd>HyperText Markup Language</dd> <!-- ❌ wrong order -->
<dt>HTML</dt>
</dl>WCAG techniques
Sufficient techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader, then navigate to a description list.
- Navigate through the terms.
Expected result: The reader voices each term, pauses, then announces its paired definition.
Actual result:
- If a foreign element exists, unexpected content or nothing is announced after certain terms.
- If the terms (
<dt>) and descriptions (<dd>) are misordered, the description is read out of context and the term is not programmatically associated with it.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires that relationships conveyed visually are also conveyed programmatically. An invalid <dl> breaks the semantic relationship between each term and its description, preventing assistive technology from exposing that information.
Why is this issue marked as Serious?
A malformed description list disrupts how screen readers relay content, forcing users to guess at missing or mis-ordered information. Because the failure undermines meaning but does not completely block access to page functionality, it carries a serious, not critical impact across browsers and assistive technologies.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |