Digital Accessibility Knowledge Base

definition-list

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

Who might be affected
Screen Reader

Description

Screen readers are widely based on the semantics of UI elements to read the application parts accurately. There are certain UI elements whose semantics depend on a compound structure of other semantic elements - semantic parts that make up a larger semantic idea, if you will. When the semantics of one of the parts do not fit to the semantics of the rest of the parts, screen readers (and browsers) can not parse and read the element accurately.

A description list (<dl>) is expected to have only description terms (<dt>) and description details (<dd>) as direct children. Other element types might break its semantic meaning.

Quick Fixes

Make sure "dl" elements don't have any direct children that are not "dt" or "dd".
1    <dl>
2✓       <dt>A11y</dt>
3✓       <dd>Short for accessibility</dd>
4

5✓       <dd>WAI is the Web Accessibility Initiative.</dd>
6✓       <dd>It is part of the W3C.</dd>
7

8✓       <dt>ARIA</dt>
9✓       <dt>spec</dt>
10✓       <dd>Is the acronyms of Accessible Rich Internet Applications.</dd>
11

12✗       <li>I am a list item too</li>
13✗       <div>I am just a box</div>
14    </dl>

How Users Are Affected

When a screen reader fails to parse the semantic meaning of UI elements it cannot mediate it correctly to the user. As a result, the user receives a partial or even incorrect mental image of the UI and might fail to use it.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A)