Accessibility
<dt> and <dd> elements must be contained by a <dl>
It is necessary to structure definition lists correctly by containing <dt> and <dd> elements within a <dl> to ensure that assistive technologies can convey the relationship between terms and their definitions, enhancing the comprehension and accessibility of the content for users with disabilities.
A definition list item must be wrapped in parent dl
elements, otherwise it will be invalid.
A definition list must follow a specific hierarchy. A list is defined using the
dl
element. What follows are alternating sets of dt
and
dd
elements, starting with the dt
element. dt
elements define a term while dd
elements denote a term's description. Each set
of dt
elements must have a corresponding set of dd
elements. Only
dt
and dd
elements are allowed in definition list. If this
hierarchy is not followed, the list will be invalid.
Fixing the problem
Wrap the list item in parent dl
elements to ensure the list
follows the proper hierarchy. Furthermore, make sure that the dt
and
dd
elements are in the proper order.
This rule checks for the valid hierarchical use of definition list elements to help screen reader users know what they are listening to, and what to expect as they listen to definition lists with regard to the organizational relationship of parent and child items.
For example, if you have the following code causing an error:
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
Wrap it in the <dl> element:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>