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:
- Each
<dl>
element must contain only<dt>
,<dd>
,<script>
, and<template>
elements. - Each
<dl>
element must contain one or more<dt>
elements. - Each
<dt>
element must contain one or more<dd>
elements.
Example
Fail
<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>
<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
<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>
<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