Struktur

Definitionslisten brauchen die richtigen Kindelemente

Regel: definition-list
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Eine <dl>, deren Kindelemente keine <dt>/<dd>-Paare sind, verliert die Zuordnung von Begriff und Erklärung. Ein Screenreader liest dann eine Folge unbeschrifteter Texte statt eines Glossars.

So beheben Sie es

Direkt in der <dl> stehen nur <dt>, <dd>, <div>, <script> und <template>.
Fassen Sie einen Begriff mit seinen Definitionen in einem einfachen <div> zusammen, wenn Sie einen Styling-Haken brauchen.
Nehmen Sie eine <ul>, wenn es sich gar nicht um Begriff und Definition handelt.

Im Markup

Fehlerhaft

<dl>
  <div>Term</div>
  <p>Definition</p>
</dl>

Korrekt

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.3.1 Info und Beziehungen (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu definition-list (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.