Correct Use of Definition List Elements for Accessibility
Rule ID: dlitem
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
How to Fix the Problem
To ensure proper semantic structure and accessibility, wrap all <dt> (definition term) and <dd> (definition description) elements within a single parent <dl> (definition list) element. This enforces the correct hierarchical structure expected by screen readers and other assistive technologies.
Here’s how to fix common structural issues:
Incorrect Example:
Corrected Example:
Best Practices:
-
Always use a
<dl>to enclose your<dt>and<dd>pairs. -
Ensure each
<dt>is followed by its corresponding<dd>element(s). -
Avoid using any other elements between
<dt>and<dd>. -
Never nest
<dl>directly inside another<dl>; if grouping is necessary, consider using headings.
Why it Matters
Definition lists provide a structured way to present terms and their descriptions. When the semantic structure is broken—by omitting the wrapping <dl> element or misordering <dt> and <dd> elements—assistive technologies can’t accurately convey the relationship between terms and descriptions. This can confuse screen reader users and make the content harder to understand.
Properly structured definition lists:
-
Help users quickly identify and navigate terms and their meanings.
-
Enhance the usability and clarity of glossaries, FAQs, and other list-based content.
-
Ensure compliance with accessibility standards and reduce the risk of legal issues.
Rule Description
All <dt> and <dd> elements must be contained within a <dl> element. This structure communicates a clear, semantically correct relationship between terms and definitions, which is essential for assistive technologies to interpret the content correctly.
The Algorithm (in simple terms)
-
Identify all
<dt>and<dd>elements on the page. -
Check whether each is a direct child of a
<dl>element. -
If any are found outside of a
<dl>, flag an error.