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