dlitem
Web validation
<dt>, <dd>) must have a <dl> parent element.<dt> and <dd> elements only convey their intended meaning when they are part of a description list. When these elements appear outside a <dl>, assistive technology may not identify the term-description relationship correctly. That can make glossary content, labels, and paired information harder to understand.
Pass Patterns
A properly structured description list
Both the term and the definition are inside the same <dl> element.
<dl>
<dt>Email</dt>
<dd>support@example.com</dd>
<dt>Phone</dt>
<dd>555-0100</dd>
</dl>Fail Patterns
Description list items do not have a <dl> parent
The <dt> and <dd> elements are wrapped in a <div> instead of a <dl>.
<div>
<dt>Shipping</dt>
<dd>Delivered within 3 to 5 business days</dd>
</div>Stray <dd> element
This fails because the <dd> element is outside the description list.
<dl>
<dt>Email</dt>
</dl>
<dd>support@example.com</dd>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.
- Navigate to the orphan description list elements.
Expected result: The reader announces that it is in a description list, and then the terms and their definitions.
Actual result:
- Screen readers announce the terms and their definitions without the context of a description list.
- Screen readers may not associate terms with their corresponding definitions.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires information and relationships to be programmatically determinable. When <dt> and <dd> elements are not inside a <dl>, the term-description relationship is not exposed reliably in the markup.
Why is this issue marked as Serious?
This issue can remove or weaken structure that assistive technology depends on. People using screen readers may not understand that the content is a set of related terms and descriptions, which can reduce clarity and confidence when reading important information.
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. |