<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements

Rule Description

Definition lists (<dl>) must contain only properly-ordered <dt> and <dd> groups, <script> or <template> elements.

The Algorithm, in Simple Terms

Ensures that all <dl> elements are structured correctly

Why this is Important

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.

Compliance Data & Impact

User Impact: Serious
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Serious
Issue Type:
  • WCAG 2.0 (A): MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • Not applicable

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>
 <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: definition-list