Accessibility
<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
Screen readers have a specific way of announcing definition lists. When such lists are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.
A definition list is used to provide the definitions of words or phrases. The Definition List
is marked up using the dl
element. Within the list, each term is put in a
separate dt
element, and its definition goes in the dd
element
directly following it.
Fixing the problem
Check that your definition list has only dt
and dd
elements. Furthermore, make sure these are properly ordered, 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.
Ensure that your definition lists follow these specifications and mimic the example
below.
Example
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>