Structure
Definition lists need the right children
- Rule:
definition-list - Severity: Serious
- WCAG level A
Why it matters
A <dl> whose children are not <dt>/<dd> pairs loses the term-to-definition relationship, so a screen reader reads a run of unlabelled text instead of a glossary.
How to fix it
- Put only <dt>, <dd>, <div>, <script> and <template> directly inside the <dl>.
- Group a term with its definitions inside a plain <div> when you need a styling hook.
- Use a <ul> instead when the content is not really term-and-definition.
In markup
<dl>
<div>Term</div>
<p>Definition</p>
</dl><dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 1.3.1 Info and Relationships (opens in new tab) — WCAG level A
Further reading
Deque University on definition-list (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.