<dt> and <dd> elements must be contained by a <dl>

Rule ID: dlitem
Ruleset: axe-core 4.3
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)

Squash more accessibility bugs with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

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

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.3 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: