Ensure <dl> Elements Are Structured Correctly
Blind
Hearing
WCAG 2.1 Level A
Definition lists (dl) must contain only properly-ordered dt and dd groups, div, script, or template elements.
Screen readers announce definition lists in a very specific way, so when lists are not properly marked up, it creates an inaccurate output
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.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<div>
<dt>Milk</dt>
<dd>White cold drink</dd>
</div>
</dl>
Copy