Digital Accessibility Knowledge Base

dlitem

<dt> and <dd> elements must be contained by a <dl>

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 make up a larger semantic idea. When the semantics of one of the parts do not fit to the semantics of the rest of the parts, screen readers (and browsers) will not be able to parse and read the element accurately.

Description terms (<dt>) and description details (<dd>) should only be the direct children of a description list (<dl>). When they are wrapped with any other element, they will probably lose their semantic meaning.

Quick Fixes

Make sure that "dt" and "dd" elements are contained only inside "dl" elements.
1    <dl>
2✓       <dt>A11y</dt>
3✓       <dd>Short for accessibility</dd>
4    </dl>
5

6    <div>
7✗       <dt>ARIA</dt>
8✗       <dd>Is the acronyms of Accessible Rich Internet Applications.</dd>
9    </div>
10

11    <ul>
12✗       <dt>I am not a list item</dt>
13✗       <dd>Me neither</dd>
14    </ul>
15

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 will get 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)