Definition lists communicate relationships between terms and their corresponding descriptions. Screen readers rely on this structure to announce items correctly and to help users understand how information is grouped.
A valid definition list must follow a specific structure. The list begins with a <dl> element, which contains one or more <dt> elements to represent terms, followed by their corresponding <dd> elements that provide descriptions or definitions. When <dt> or <dd> elements appear outside a <dl>, or when they are arranged incorrectly, the semantic relationship between terms and definitions is lost. In these cases, assistive technologies typically announce the content as plain text rather than as a definition list. This removes important structural cues, making the content harder to understand for users who rely on auditory feedback.
A valid definition list must always begin with a <dl> element, followed by <dt> elements representing terms and <dd> elements providing descriptions for those terms. Only <dt> and <dd> elements may appear directly inside a <dl>, and they must follow a logical, predictable pattern.
WCAG Success Criteria
The following WCAG 2.1 success criteria explain why a correct definition list structure is essential for accessibility.
1.3.1 Info and Relationships (Level A)
Information and relationships must be programmatically determinable.
Example:
Screen readers announce a definition list only when <dt> and <dd> elements are properly grouped inside a <dl>. If these elements appear outside a definition list, the relationship between terms and definitions is not conveyed.
1.3.2 Meaningful Sequence (Level A)
Content must follow a logical order.
Example:
Placing each <dt> (term) before its corresponding <dd> (definition) allows users to understand which description belongs to which term.
4.1.2 Name, Role, Value (Level A)
Components must expose their roles accurately.
Example:
Screen readers can only announce “definition list,” “term,” and “definition” roles when the correct elements are used in the proper hierarchy.
What Proper Definition List Structure Looks Like
A definition list uses three element types:
<dl>— the parent container defining the list<dt>— the term being defined<dd>— the description or explanation of the term
Correct Example
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>Incorrect Example (Missing <dl> Wrapper)
<dt>Coffee</dt>
<dd>Black hot drink</dd>Without the parent <dl>, assistive technologies have no semantic context for interpreting these items as related definitions.
Why This Matters
Definition lists depend on structure to convey meaning. When <dt> and <dd> elements are correctly nested, screen readers announce cues such as:
- “Definition list”
- “Term”
- “Definition”
These cues help users understand what type of content they are navigating and how items relate to each other. When the structure is incorrect, the content is read as unstructured text, removing all semantic relationships.
Consistent definition list structure ensures that:
- Terms and descriptions remain clearly linked
- Users can navigate between items efficiently
- Relationships between concepts remain understandable
When to Use Definition Lists
Definition lists are not limited to dictionary-style definitions. They are appropriate whenever content is presented as term–description pairs, such as:
- Glossaries
- Metadata (label–value pairs)
- Product specifications
- Question-and-answer pairs (when structured correctly)
They should not be used for simple lists of items or for layout purposes. In those cases, <ul>, <ol>, or CSS-based layouts are more appropriate.
Best Practices for Proper Definition List Structure
Follow these practices to keep definition lists accessible and predictable:
- Always wrap
<dt>and<dd>elements inside a<dl> - Place one or more
<dt>elements before their associated<dd>elements - Allow multiple
<dd>elements for a single<dt>when needed - Allow multiple
<dt>elements to share a single<dd>when appropriate - Do not place unrelated elements directly inside a
<dl> - Ensure the order reflects the intended meaning
Incorrect Example
<dl>
<dd>Something without a term</dd>
<dt>Term appears later</dt>
</dl>Corrected Version
<dl>
<dt>Term appears first</dt>
<dd>Something describing the term</dd>
</dl>How to Fix the Problem
To correct improper definition list markup:
- Identify all
<dt>and<dd>elements - Ensure they are wrapped inside a
<dl>container - Verify that terms appear before their descriptions
- Confirm that each definition is meaningfully associated with a term
- Remove or relocate any elements that do not belong inside the list
Incorrect Use
<dt>Coffee</dt>
<dd>Black hot drink</dd>Correct Use
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>The semantic relationship is now correctly exposed.
Who Is Affected
Improper definition list structure impacts:
- Screen reader users who rely on semantic announcements
- Users who navigate content using structural cues
- Anyone interpreting complex definitions, glossaries, or paired information
Rule Description
Definition list items must be wrapped inside a parent <dl> element. <dt> elements define terms, and <dd> elements define their descriptions. Only when this hierarchy is followed can assistive technologies accurately communicate the relationships between items.
The Algorithm
This rule evaluates structure as follows:
- Locate all
<dt>and<dd>elements - Verify they are direct children of a
<dl> - Confirm that
<dt>elements appear before the<dd>elements they describe - Allow one-to-many or many-to-one relationships between terms and definitions
- Flag any
<dt>or<dd>elements that lack a<dl>parent
Wrapping Up
Definition lists rely on the correct hierarchy of <dl>, <dt>, and <dd> elements to convey relationships between terms and descriptions. When this structure is followed, screen readers can announce content with clear meaning and context, helping users understand how information is organised across the page.
Proper definition list markup ensures that relationships are preserved, not just visually, but programmatically.
