<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, or <template> elements
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
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
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>
<div>
<dt>Milk</dt>
<dd>White cold drink</dd>
</div>
</dl>Why it Matters
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.
Rule Description
Definition lists (dl) must contain only properly-ordered
dt and dd groups, div,
script, or template elements.
The Algorithm (in simple terms)
Ensures that all dl elements are structured correctly.
Resources
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: