What This Rule Checks
Definition lists must have a proper structure to ensure screen readers and assistive technologies can understand the content hierarchy. A definition list (<dl>) should contain term (<dt>) and definition (<dd>) pairs, all wrapped inside a parent <dl> element.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
When definition terms and descriptions appear outside a <dl> container, screen readers cannot identify them as a definition list. The semantic relationship between terms and definitions is lost.
How to Fix
Use Only <dt> and <dd> Inside a <dl>
Ensure that every <dl> (definition list) contains only <dt> (term) and <dd> (definition) elements. These elements should not be mixed with any other elements such as <p>, <div>, or <span>.
Avoid Placing Non-Term or Definition Elements in a <dl>
If you need to use other elements, they should be outside the <dl> structure. Keep the definition list clean and easy to understand for users relying on assistive technologies.
Code Examples
<!-- dt/dd outside a definition list -->
<div>
<dt>Term</dt>
<dd>Definition</dd>
</div>
Copy
<!-- dt/dd properly inside dl -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
Copy
Common Mistakes to Avoid
- Placing <dt> or <dd> inside a <div> instead of a <dl>.
- Using <dt>/<dd> for layout purposes outside of actual definition lists.
- Wrapping <dt>/<dd> in elements like <ul> or <ol>.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.
Related WCAG Criteria
- 1.3.1: Info and Relationships