A: < dl>-Elemente dürfen unmittelbar nur korrekt verschachtelte < dt>- und < dd>-Gruppen, < script>- oder < template>-Elemente enthalten (WCAG 1.3.1)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass <dl>-Elemente ordnungsgemäß strukturiert sind.

Das bedeutet

In einem <dl> dürfen direkt nur Gruppen aus einem oder mehreren <dt> gefolgt von einem oder mehreren <dd> stehen – sowie optional <script> oder <template>. Andere Elemente wie <div>, <p>, <ul> sind an dieser Stelle nicht erlaubt.

Auswirkung

Screenreader können Begriffe und zugehörige Beschreibungen nicht zuverlässig zuordnen. Nutzerinnen und Nutzer verlieren Orientierung; die semantische Struktur ist fehlerhaft und verstößt gegen WCAG.

Empfehlung

• Für jede Begriffsbeschreibung: <dt>…</dt> und die passende(n) <dd>…</dd> direkt im <dl>.

• Keine fremden Container direkt in <dl> verwenden. Falls Layout nötig ist, Klassen auf <dt> und <dd> setzen.

• Mehrere Begriffe können sich eine Beschreibung teilen und umgekehrt, aber stets in der Reihenfolge dt → dd gruppieren.

• Native HTML-Semantik beibehalten; keine unnötigen ARIA-Rollen.

Beispiel

Problematisch

<dl>
  <div class="row">
    <dt>Versand</dt>
    <dd>3–5 Werktage</dd>
  </div>
  <p><dt>Widerruf</dt><dd>14 Tage</dd></p>
</dl>

Besser

<dl>
  <dt>Versand</dt>
  <dd>3–5 Werktage</dd>
 
  <dt>Widerruf</dt>
  <dd>14 Tage</dd>
 
  <dt>Bezahlung</dt>
  <dt>Rechnung</dt>
  <dd>Fällig in 14 Tagen</dd>
</dl>

Varianten mit mehreren Zuordnungen

Mehrere <dt> für eine <dd> oder mehrere <dd> für ein <dt> sind erlaubt, solange die Reihenfolge dt(s) → dd(s) eingehalten wird.

Verknüpfte WCAG-Kriterien:
WCAG 1.3.1 - Info und Beziehungen