• June 1, 2025

Accessible Definition Lists

Rule ID: definition-list
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 your definition lists are accessible:

1. Use Only <dt> and <dd> Elements Inside <dl>:

   • Every definition list must be wrapped in a <dl> tag.

   • Inside the <dl>, use <dt> for each term and <dd> for its definition.

   • Do not insert other elements such as <div>, <p>, or <span> inside the <dl> unless they’re allowed (e.g., <script> or <template> for special purposes).

2. Correct Ordering is Required:

   • A <dt> must always be followed by at least one <dd>.

   • Never place a <dd> before a <dt>, or use multiple <dt>s without at least one corresponding <dd>.

3. Fix Invalid Nesting (as in the example below):
   The following is incorrect:

   html

   KopierenBearbeiten

   <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<div> <!-- This is invalid -->
<dt>Milk</dt>
<dd>White cold drink</dd>
</div>
</dl>


   The correct version:

   html

   KopierenBearbeiten

   <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>


Why it Matters

Screen readers and other assistive technologies interpret definition lists in a specific way to present content meaningfully. When definition lists contain disallowed or misordered elements, users may experience:

• Confusing or misleading information.

• Broken structure where terms and definitions are not properly paired.

• A loss of semantic context that impacts user comprehension.

Properly structured definition lists ensure that content is announced in a predictable and understandable manner, which is critical for users relying on screen readers.

Rule Description

This rule requires that all <dl> elements include only valid child elements: namely, sequences of <dt> followed by one or more <dd> elements. Certain elements like <script> and <template> are exceptions and are allowed when used appropriately. No other tags (like <div> or <span>) should be directly nested inside a <dl>.

The Algorithm (in Simple Terms)

The rule checks every <dl> element on the page and verifies that:

• Only <dt>, <dd>, <script>, or <template> elements are direct children.

• Every <dt> is followed by one or more <dd> elements.

• No <dd> comes before a <dt>, and no disallowed elements like <div> interrupt the structure.