<dl> must contain properly-ordered <dt>/<dd> groups

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

<dl> contains only terms (<dt>) and definitions (<dd>) — no other elements.

Why this matters and how to fix it

Why this matters

Screen readers announce definition lists by pairing each term (<dt>) with its corresponding definition (<dd>). If the structure is broken, users cannot understand which definition belongs to which term, causing meaning and relationships to be lost.

How to fix this issue

Ensure <dl> elements contain only <dt> and <dd>, in that order. A term (<dt>) may be followed by one or multiple definitions (<dd>). Do not use <div>, <span>, or other elements directly inside <dl> for layout—style the correct semantic elements instead.

Automated detection · Manual review recommended

Developer guidance

This issue often occurs when teams replace <dt>/<dd> with generic elements for layout or visual styling. Keep the semantic markup and apply CSS (e.g., flex/grid) to <dt> and <dd> elements. If building a reusable UI component, enforce this structure programmatically.

Code examples

Incorrect Implementation

<dl><div>Term</div><div>Definition</div></dl>

Correct Implementation

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface</dd>
</dl>

Real-World Examples

Before

<dl>
  <dt>Latency</dt>
  <span>The time it takes for data to travel.</span>
</dl> <!-- Screen reader cannot announce this as a definition pair -->

After

<dl>
  <dt>Latency</dt>
  <dd>The time it takes for data to travel.</dd>
</dl> <!-- Screen reader correctly announces: 'Latency, definition: The time it takes...' -->

Manual testing

  1. 1. Inspect the contents of each <dl> element.
  2. 2. Confirm that only <dt> and <dd> elements are direct children.
  3. 3. Ensure each <dt> is followed by one or more <dd> elements.
  4. 4. If layout styling is needed, apply CSS to <dt> and <dd> instead of replacing them.
  5. 5. Test with a screen reader to confirm each term/definition pair is announced clearly.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance