<dt> and <dd> must be inside a <dl>

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.

Wrap each <dt> and its <dd> definitions inside a <dl> so screen readers can pair terms with their definitions correctly.

Why this matters and how to fix it

Why this matters

<dt> and <dd> communicate a term–description relationship. Screen readers announce <dt> as the label and <dd> as the value. If these elements are used outside of a <dl>, assistive technologies lose this relationship, making key-value information confusing or unusable.

How to fix this issue

Wrap all <dt>/<dd> pairs inside a <dl>. If layout styling is needed, keep the semantic elements and apply CSS Grid or Flexbox rather than replacing them with div/span wrappers.

Automated detection · Manual review recommended

Developer guidance

This commonly breaks in account summary panels, dashboards, billing overviews, and settings pages. If your component library has a DescriptionList, ensure it outputs semantic <dl><dt><dd>. Add lint rules to prevent standalone <dt> or <dd>.

Code examples

Incorrect Implementation

<section class="details">
  <dt>Status</dt>
  <dd>Active</dd>
  <dt>Plan</dt>
  <dd>Pro</dd>
</section>

Correct Implementation

<dl class="details">
  <dt>Status</dt>
  <dd>Active</dd>
  <dt>Plan</dt>
  <dd>Pro</dd>
</dl>

Real-World Examples

Before

<div class="account-summary">
  <div class="label">Email</div>
  <div class="value">user@example.com</div>
  <div class="label">Role</div>
  <div class="value">Admin</div>
</div>

After

<dl class="account-summary">
  <dt>Email</dt>
  <dd>user@example.com</dd>
  <dt>Role</dt>
  <dd>Admin</dd>
</dl>

CSS Example (Guidance)

/* Maintain layout while keeping semantics */
.account-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}
.account-summary dt { font-weight: 600; }
.account-summary dd { margin: 0; }

Manual testing

  1. 1. Turn on VoiceOver (macOS), NVDA (Windows), or TalkBack (Android).
  2. 2. Navigate to the section containing the label/value pairs using the arrow keys (not Tab).
  3. 3. Listen to how screen reader announces each pair.
  4. • Expected: 'Status: Active', 'Plan: Pro', etc.
  5. • Incorrect: 'Status', 'Active' as separate unrelated items.
  6. 4. Use Accessibility Tree inspector (Chrome DevTools: Elements → Accessibility) to confirm the <dl> structure is present.
  7. 5. If screen reader does not announce the term and definition together, the semantic structure is incorrect.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance