Learn Measure Blog About

<dl>s do not contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements

Updated

Screen readers and other assistive technologies have a specific way of announcing definition lists. When definition lists are not properly marked up, assistive technologies may produce confusing or inaccurate output.

How this Lighthouse audit fails

Lighthouse flags <dl> elements that don't contain properly ordered <dt> and <dd> groups, <script>, or <template> elements:

Lighthouse audit showing definition lists do not contain properly ordered <dt> and <dd> groups, <script>, or <template> elements

The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

How to structure definition lists correctly

Definition list items require dl elements around the list, dt elements for each term, and dd elements for each definition. Each set of dt elements must be followed by one or more dd elements. For example:

<dl>
<dt>Trail shoe</dt>
<dd>Extra grip for uneven, natural survaces, such as forest trails.</dd>
<dt>Road shoe</dt>
<dd>Extra cushioning for hard surfaces, such as sidewalks and roads.</dd>
</dl>

Resources

Last updated: Improve article