Ensure <dl> Elements Are Structured Correctly
Blind
Hearing
WCAG 2.2 Level A
Definition lists (dl) must contain only properly-ordered dt and dd groups, div, script, or template elements.
Why It Matters
Screen readers announce definition lists in a very specific way, so when lists are not properly marked up, it creates an inaccurate output
Fixing the Issue
Developers should check that definition lists only have dt and dd elements. They should also be ordered correctly – dt should precede dd elements.
Definition list items require dl elements around the list, dt elements for each term, and dd elements for each definition. Each set of dt elements must be followed by one or more dd elements.
Good Code Example
Code example
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<div>
<dt>Milk</dt>
<dd>White cold drink</dd>
</div>
</dl>
Copy