Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

definition-list

A <dl> element must directly contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements.

Why it matters

A definition list is a list of terms (words or phrases), and their definitions. A definition list can contain only certain element types, and it requires a specific structure.

When an assistive technology encounters a definition list that’s poorly structured or contains invalid elements, it might respond in an unexpected way. As a result, people who use assistive technologies might find it difficult to interpret the list.

How to fix

Make sure each <dl> element is properly structured:

  1. Each <dl> element must contain only <dt> , <dd> , <script> , and <template> elements.
  2. Each <dl> element must contain one or more <dt> elements.
  3. Each <dt> element must contain one or more <dd> elements.

Example

 

Fail

This definition list includes two <img> elements that aren't contained in <dt> or <dd> elements. Assistive technologies can't determine whether the image is part of a term or its definition. They might present the list in a way that confuses users.
<dl>
<dt>Coffee</dt>
<img src="coffee.JPG" width="50" height="50" alt="A coffee plant with large green leaves and small red berries>
<dd>A beverage prepared from the roasted seeds of various Coffea species.</dd>
<dt>Tea</dt>
<img src="Tea.jpg" width="50" height="50" alt=
"A tea plant with small green leaves and white blossoms">

<dd>A beverage prepared from the cured leaves of Camellia sinensis.</dd>
</dl>
 

Pass

Each <img> element is contained within a <dt> element. Assistive technologies can correctly present the structure of the definition list.
<dl>
<dt>Coffee
<img src="coffee.JPG" width="50" height="50" alt="A coffee shrub with large green leaves and small red berries">
</dt>
<dd>A beverage prepared from the roasted seeds of various Coffea species.</dd>
<dt>Tea
<img src="Tea.jpg" width="50" height="50" alt="A tea plant with small green leaves and white blossoms">
</dt>
<dd>A beverage prepared from the cured leaves of Camellia sinensis.</dd>
</dl>

About this rule

This rule passes if:

  • When not empty, the <dl> element has both <dt> and <dd> elements
  • <dl> element has only direct children that are allowed inside <dt> or <dd> elements

More examples