<dt> and <dd> elements must be contained by a <dl>
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
WCAG Success Criteria [WCAG 2.1 (A)]
- 1.3.1: MUST: Info and Relationships
WCAG Success Criteria [WCAG 2.0 (A)]
- 1.3.1: MUST: Info and Relationships
How to Fix 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>Why it Matters
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.
Rule Description
Definition list items (dt and/or dd) must be wrapped
in parent dl elements to be valid. This enables screen reader
users to understand the proper hierarchy of information in the list.
The Algorithm (in simple terms)
Ensures that all child dd and dt elements have a
dl as a parent.
Resources
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: