A: < dt>- und < dd>-Elemente müssen in einem < dl>-Element enthalten sein (WCAG 1.3.1)
dlitem
Stellt sicher, dass <dt> und <dd>-Elemente in einem <dl>-Element enthalten sind.
Das bedeutet
Die Elemente <dt> (Begriff) und <dd> (Beschreibung) dürfen nicht allein oder in beliebigen Containern stehen. Sie gehören semantisch in eine Definitionsliste <dl>. Außerhalb eines <dl> verlieren sie ihre Bedeutung.
Auswirkung
Screenreader können Begriffe und Beschreibungen nicht korrekt zuordnen. Nutzerinnen und Nutzer verlieren Orientierung; die semantische Struktur ist fehlerhaft und verstößt gegen WCAG.
Empfehlung
-
Immer <dt> und <dd> innerhalb eines <dl> verwenden.
-
Für Layout keine fremden Wrapper um <dt>/<dd> legen. Stattdessen Klassen direkt auf <dt>/<dd> oder Inhalte innerhalb von <dd> stylen.
-
Wenn keine Definitionen gemeint sind, geeignete Semantik nutzen (z. B. <ul>/<li> oder <h2> + <p>).
Beispiel
Problematisch
<p><dt>Versand</dt><dd>3–5 Werktage</dd></p>
<div class="spec"><dt>Material</dt><dd>Holz</dd></div>
Besser
<dl>
<dt>Versand</dt>
<dd>3–5 Werktage</dd>
<dt>Material</dt>
<dd>Holz</dd>
</dl>
Verknüpfte WCAG-Kriterien:
WCAG 1.3.1 - Info und Beziehungen