Praxisleitfaden Begriffe und Beschreibungen
dt und dd richtig einordnen
Erkennen Sie fehlende Listenstruktur und verbinden Sie Begriffe mit ihren Beschreibungen.
dlitemWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-dlitem.html
Befund verstehen
Der Begriff steht ohne Beschreibungsliste im HTML
Scanner-Signal
dlitem meldet das dt-Element „Zwangszug“: Ein übergeordnetes dl-Element fehlt.
Technische Einordnung
- Regel
dlitem- Referenz
- WCAG 1.3.1
Im importierten Partieheft stehen Begriff und Erklärung nebeneinander im selben div. Der Text ist lesbar, doch der Container kennzeichnet keine Beschreibungsliste. Die Regel prüft diese Einordnung für dt- und dd-Elemente.
Bedeutung im Nutzungskontext
Menschen, die die Seite mit einem Screenreader lesen, erhalten keine verlässliche Listenstruktur für dieses Begriffspaar. Die sichtbare Einrückung allein vermittelt die Beziehung nicht programmatisch.
HTML-Diagnose vor der Korrektur
Ziel: .purdy-notation > :nth-child(2) > dt
Text: Zwangszug
Elternelement: div
Übergeordnetes dl: fehlt
Axe dlitem: VerstoßBegriffspaare aus derselben Vorlage prüfen
Eine Begriffskomponente kann dt und dd auf mehreren Seiten ohne dl ausgeben. Prüfen Sie die erzeugten Container.
- Partienotizen× Befund im Beispiel
- Begriffsarchiv× Befund im Beispiel
- Freier Textabschnitt Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie den dl-Kontext der betroffenen Begriffspaare nach Speichern, Neuladen und weiteren Importen.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Struktur passt zu diesem Inhalt?
Entscheidend ist die Beziehung zwischen Begriff und Erklärung.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ein Begriff mit Erklärung | Wie hier folgt auf „Zwangszug“ eine zugehörige Beschreibung. | Verwenden Sie dl als Container, dt für den Begriff und dd für seine Beschreibung. |
| Ein Eintrag einer bestehenden Liste | Das Paar gehört zu einem Glossar, ist aber aus dessen dl herausgerutscht. | Ordnen Sie das Paar an der richtigen Stelle in die vorhandene Liste ein. |
| Überschrift oder Fließtext | dt oder dd wurde lediglich wegen seiner Standarddarstellung gewählt. | Wählen Sie das zum Inhalt passende Element und gestalten Sie es mit CSS. |
Fundstelle im Kontext
Das Begriffspaar im vollständigen Notizbereich
Der Ausschnitt zeigt die Überschrift, den Importhinweis und alle Notizfelder der Kalibrierseite. Markiert ist das vollständige zweite Feld mit „Zwangszug“ und der zugehörigen Beschreibung.
Die Einrückung lässt Begriff und Beschreibung bereits zusammengehörig aussehen. Im HTML fehlt ihrem Container jedoch die Listenbedeutung. Die Textdiagnose macht diesen im Bild kaum erkennbaren Unterschied nachvollziehbar.
Struktur korrigieren
Den gemeinsamen Container durch dl ersetzen
Das Beispiel ersetzt ausschließlich das div um „Zwangszug“ und seine Beschreibung durch dl. Beide vorhandenen Einträge bleiben erhalten und stehen in derselben Reihenfolge. Die Inhalte der benachbarten Notizfelder gehören nicht in diese neue Liste.
Im Template oder CMS Korrigieren Sie die Ausgabe der Begriffskomponente. Prüfen Sie nach dem Speichern das gerenderte HTML; ein visuell passender Editorblock garantiert noch kein dl.
Vorher
<div>
<dt>Zwangszug</dt>
<dd>Ein Zug mit unmittelbarer Drohung.</dd>
</div>Nachher
<dl>
<dt>Zwangszug</dt>
<dd>Ein Zug mit unmittelbarer Drohung.</dd>
</dl>Markierte Zeilen wurden geändert
Umsetzung absichern
Das Begriffspaar als Einheit ausgeben
Sichern Sie die Struktur dort, wo die Einträge entstehen.
- 1
Geben Sie Begriff und Beschreibung gemeinsam im dl aus, auch bei bedingt angezeigten Einträgen.
- 2
Kontrollieren Sie die Reihenfolge im gerenderten DOM: Die Erklärung muss zu ihrem Begriff gehören.
- 3
Prüfen Sie Listenränder und Abstände nach dem Elementwechsel. Im Beispiel verändert die Standarddarstellung des dl den oberen Abstand leicht.
- 4
Testen Sie weitere Instanzen derselben Komponente nach Importen, Filterwechseln oder dynamischem Nachladen.
Fehlkorrekturen vermeiden
Was den fehlenden Zusammenhang nicht ersetzt
Nur Einrückung ergänzen
Ein margin oder eine CSS-Klasse namens „definition“ ändert die HTML-Struktur nicht.
Nur den markierten Begriff einpacken
Die zugehörige Beschreibung gehört ebenfalls in die Liste. Lassen Sie das dd nicht im alten Container zurück.
Den gesamten Notizbereich in dl verwandeln
Überschrift, Variantenliste und Schaltfläche sind keine Beschreibungen dieses Begriffs. Wählen Sie den gemeinsamen Container des tatsächlichen Paars.
Alle dt und dd durch div ersetzen
Damit verschwinden zwar Prüfkandidaten, aber auch die beabsichtigte Semantik. Bewahren Sie die inhaltliche Beziehung.
Derselbe Begriff besteht den erneuten Regeltest
Nach dem Austausch des Containers meldet Axe für das dt „Zwangszug“ einen dlitem-Pass. Die zusätzliche Prüfung bestätigt, dass das neue dl den unveränderten Begriff und seine unveränderte Beschreibung enthält.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite und prüfen Sie den gemeinsamen dl-Container im DOM.
- Führen Sie dlitem erneut aus und vergleichen Sie die konkrete Fundstelle.
- Lesen Sie das Begriffspaar mit einem Screenreader im Zusammenhang der benachbarten Notizen.
Der Nachweis gilt für dlitem am markierten dt. Andere Fehler im importierten Notizbereich und die fachliche Richtigkeit der Schachbeschreibung sind damit nicht geprüft.
HTML-Diagnose nach der Korrektur
Ziel: .purdy-notation > :nth-child(2) > dt
Text: Zwangszug
Elternelement: dl
Folgender Eintrag: dd mit unverändertem Text
Axe dlitem: bestandenPrüfgrenzen kennen
Die Struktur lässt sich prüfen, die Erklärung braucht Kontext
Ein korrekter Container ist die technische Grundlage für die Zuordnung.
Automatisch prüfbar
- dt und dd ohne den erforderlichen dl-Kontext finden.
- Die betroffene Stelle anhand des Selektors zuordnen.
- Nach einer Änderung dieselbe Regel am Ziel erneut ausführen.
Im Kontext zu entscheiden
- Entscheiden, ob die Inhalte tatsächlich Begriffe und Beschreibungen bilden.
- Bewerten, ob die Erklärung fachlich richtig und dem richtigen Begriff zugeordnet ist.
- Die verständliche Ausgabe mit Screenreader sowie weitere Zustände des Notizbereichs prüfen.