Structure and landmarks Rule

Terms and descriptions must sit inside a definition list dlitem

dt and dd only mean term and description when they are inside a dl. Put them straight into a div or a section and a screen reader hears ordinary text with the pairing lost. It usually happens when a layout wrapper replaces the dl, or when one dl is split into several blocks to make columns.

WCAG 2.2 A 1.3.1 Info and Relationships

Websight reports this as <dt> and <dd> elements must be contained by a <dl>

Who it affects

A student who is blind, checking her exam timetable on the sixth form college website hears 'Biology, Hall B, 9am' as a run of words with no sign of which is the subject and which the room.

Someone who navigates a screen reader by list cannot find the timetable, because without the dl it is not a list.

Someone using a custom stylesheet or reader view loses the indentation that showed which lines belonged together.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

The dt and dd sit inside plain divs. A screen reader reads them as text with no list and no pairing.

Fixed

Announced as a definition list: Biology, Hall B, 9am. The div wrappers are fine once a dl surrounds them.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;margin:0;padding:16px}.exam{display:flex;gap:16px;margin:4px 0}dt{font-weight:600;min-width:110px}dd{margin:0}</style>
<p style="margin:0 0 6px"><strong>Exams, Monday 12 May</strong></p>
<div class="exam"><dt>Biology</dt><dd>Hall B, 9am</dd></div>
<div class="exam"><dt>Chemistry</dt><dd>Hall A, 1.30pm</dd></div>
<div class="exam"><dt>Mathematics</dt><dd>Sports hall, 1.30pm</dd></div>
Fixed
<style>body{font-family:system-ui;margin:0;padding:16px}dl{margin:0}.exam{display:flex;gap:16px;margin:4px 0}dt{font-weight:600;min-width:110px}dd{margin:0}</style>
<p style="margin:0 0 6px"><strong>Exams, Monday 12 May</strong></p>
<dl>
  <div class="exam"><dt>Biology</dt><dd>Hall B, 9am</dd></div>
  <div class="exam"><dt>Chemistry</dt><dd>Hall A, 1.30pm</dd></div>
  <div class="exam"><dt>Mathematics</dt><dd>Sports hall, 1.30pm</dd></div>
</dl>

Test it by hand in two minutes

  1. Right click a term, choose Inspect, and walk up from the dt. The nearest ancestor that is not a div should be a dl.
  2. Ask whether the group really is terms and descriptions. If it is a heading and a paragraph, use those elements instead.
  3. With VoiceOver, move into the block. You should hear 'definition list' as you enter it.

The fix

Before
<div class="exam">
  <dt>Biology</dt>
  <dd>Hall B, 9am</dd>
</div>
After
<dl>
  <div class="exam">
    <dt>Biology</dt>
    <dd>Hall B, 9am</dd>
  </div>
</dl>

Keep the div for layout, but put one dl around the whole set of groups.

Several blocks that should be one dl

Before
<dl><dt>Biology</dt><dd>Hall B</dd></dl>
<section><dt>Chemistry</dt><dd>Hall A</dd></section>
After
<dl>
  <div><dt>Biology</dt><dd>Hall B</dd></div>
  <div><dt>Chemistry</dt><dd>Hall A</dd></div>
</dl>

One list, one dl. Use CSS columns or grid on the dl if the design needs columns.

Not a term and description at all

Before
<section>
  <dt>Exam timetable</dt>
  <dd>Published on 1 May.</dd>
</section>
After
<section>
  <h2>Exam timetable</h2>
  <p>Published on 1 May.</p>
</section>

A heading and a sentence are a heading and a paragraph. dt and dd were only being used for their default styling.

Common mistakes

  • Using dt as a bold label and dd as an indented paragraph for the look, anywhere on the page.
  • Splitting one dl into several blocks so each column is its own element, and dropping the dl from the later blocks.
  • Wrapping the groups in a ul or in spans instead of divs.
  • Adding role="term" or role="definition" to the stray elements instead of restoring the dl.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see a dt or dd whose parent is not a dl, allowing for a div wrapper in between. It cannot tell whether the content was meant to be a definition list in the first place. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Definition lists must be built from matching terms and descriptions definition-list A dl is a list of terms and their descriptions: each dt (the term) is followed by one or more dd (the description). A Lists must only contain list items list A ul or ol tells a screen reader 'list, N items' and lets the person jump item by item. A List items must sit inside a list listitem An li is only a list item when its parent is a ul, ol or menu.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.