Praxisleitfaden Beschreibungslisten im HTML
Beschreibungslisten korrekt strukturieren
Trennen Sie freie Hinweise von Begriffen und zugehörigen Beschreibungen.
definition-listWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-definition-list.html
Befund einordnen
Ein Absatz steckt im falschen Container
Im Karteikartenimport stehen ein Herkunftshinweis und das Paar „Rollencode / FD–B“ innerhalb derselben Beschreibungsliste. Der Hinweis ist weder Begriff noch zugehörige Beschreibung. Er gehört als eigenständiger Absatz vor die Liste.
Warum das relevant ist
Visuell sind Hinweis und Rollencode lesbar. Die HTML-Struktur bildet ihre unterschiedlichen Aufgaben jedoch nicht sauber ab. Das kann die Ausgabe einer Beschreibungsliste mit assistiven Techniken verwirrend machen.
Scanner-Signal
definition-list meldet an .card-file-import dl ein unzulässiges direktes Kind: p.
- Regel
definition-list- Referenz
- WCAG 1.3.1
Struktur vor der Korrektur
dl
p: allgemeiner Herkunftshinweis
dt: Rollencode
dd: FD–B
Axe: only-dlitems meldet das direkte Kind p.Beschreibungsliste im Seitenbestand finden
Ein eingeschlossener Hinweis kann nur einzelne Importseiten betreffen. Die Seitenübersicht zeigt, wo Sie die Listenstruktur gezielt prüfen können.
Illustratives Beispiel · Hinweise in Beschreibungslisten
3 von 100 Seiten3 % mit diesem Befund im Beispiel
Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.
Betroffene Seiten im Beispiel: 12, 44, 79.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Ist der Text ein Hinweis oder eine Beschreibung?
Entscheiden Sie anhand der Beziehung zum Begriff, welches Element den Text tragen soll.
Die Lehrskizze zeigt die direkten Kinder des geprüften dl. Nach der Korrektur steht der Herkunftshinweis als eigener Absatz davor.
- Herkunftshinweisp · unzulässiges direktes Kind
- Rollencodedt · Begriff
- FD–Bdd · Beschreibung
- Rollencodedt · Begriff
- FD–Bdd · Beschreibung
Passende Umsetzung auswählen
Kontext prüfen
Die Karteikarte im vollständigen Ausschnitt
Der Ausschnitt zeigt die Importüberschrift, den Herkunftshinweis, den Rollencode und die benachbarten Zuordnungsfelder.
Markiert ist die Beschreibungsliste einschließlich des falsch einsortierten Herkunftshinweises. Die weiteren Elemente des Imports bleiben als Kontext sichtbar; ihre eigenen Fehler sind nicht Gegenstand dieser Korrektur.
HTML korrigieren
Den Hinweis vor die Liste verschieben
Der vorhandene Absatz wird aus dem dl herausgenommen und unmittelbar davor eingefügt. Die Liste behält denselben Begriff und denselben Wert. Ein neuer Name, eine zusätzliche ARIA-Rolle oder ein Eingriff in das Layout sind dafür nicht nötig.
Im CMS oder Template Legen Sie den Hinweis als separaten Textblock vor der Beschreibungsliste an. Prüfen Sie nach dem Speichern das gerenderte HTML, weil ein Editor den Absatz erneut in die Liste einschließen kann.
Vorher
<dl>
<p>Dieser Herkunftshinweis wurde fälschlich direkt in die Definitionsliste geschrieben.</p>
<dt>Rollencode</dt>
<dd>FD–B</dd>
</dl>Nachher
<p>Dieser Herkunftshinweis wurde fälschlich direkt in die Definitionsliste geschrieben.</p>
<dl>
<dt>Rollencode</dt>
<dd>FD–B</dd>
</dl>Markierte Zeilen wurden geändert
Ausgabe absichern
Die Beziehung im Template erhalten
Kontrollieren Sie die fertige DOM-Struktur auch bei unterschiedlichen Datensätzen.
- 1
Erzeugen Sie Begriff und zugehörige Beschreibung gemeinsam, damit bedingte Ausgaben kein unvollständiges Paar hinterlassen.
- 2
Halten Sie allgemeine Hinweise, Überschriften und Bedienelemente außerhalb der Beschreibungsliste.
- 3
Wenn ein Begriff mehrere Beschreibungen hat, erhalten Sie deren sinnvolle Reihenfolge direkt nach dem Begriff.
- 4
Prüfen Sie Layout-Gruppierungen mit div ebenfalls auf vollständige, korrekt geordnete dt/dd-Gruppen.
Fehlversuche vermeiden
Was den Befund nur verdeckt
Den Hinweis blind in dd umbenennen
Der Herkunftshinweis würde dadurch als Beschreibung erscheinen, obwohl er die gesamte Karte erläutert. Die Bedeutung entscheidet über die Zuordnung.
Den Absatz nur ausblenden
display: none entfernt den Hinweis aus der Darstellung und der zugänglichen Ausgabe. Der benötigte Inhalt geht verloren, statt korrekt eingeordnet zu werden.
Nur Einrückung oder Abstände ändern
CSS kann die Karte ordnen, ändert aber nicht, dass p direkt unter dl liegt.
Benachbarte Fehler als mitgelöst ansehen
Der lose Begriff unter der Liste und die übrigen Importfelder werden mit diesem Eingriff nicht repariert. Dafür sind eigene Befunde und Prüfungen nötig.
Gleiche Darstellung, bereinigte Listenstruktur
Der erneute Axe-Lauf besteht definition-list am selben dl. Der Herkunftshinweis steht davor; Rollencode und FD–B bleiben erhalten. Die unmarkierten Vorher- und Nachher-Aufnahmen sind pixelgleich.
So prüfen Sie die Korrektur nach
- Im DOM prüfen: Der Herkunftshinweis ist der vorherige Absatz des dl, kein Kind der Liste.
- Prüfen, dass Rollencode als dt und FD–B als folgendes dd weiterhin vorhanden sind.
- definition-list auf der veröffentlichten Seite erneut ausführen und die Fundstelle vergleichen.
- Mit assistiver Technik kontrollieren, dass Hinweis, Begriff und Wert in verständlicher Reihenfolge zugänglich sind.
Das Ergebnis gilt für diese Liste und diese Regel. Es belegt weder die Reparatur der übrigen Importfehler noch vollständige Barrierefreiheit der Seite.
Struktur nach der Korrektur
p: allgemeiner Herkunftshinweis
dl
dt: Rollencode
dd: FD–B
Axe: definition-list bestanden am selben dl.
Darstellung: unverändert.Prüfumfang verstehen
Struktur automatisch, Zuordnung fachlich prüfen
Der Scanner erkennt unzulässige Listenkinder. Den Sinn der Inhalte müssen Sie im Kontext beurteilen.
Automatisch prüfbar
- Unzulässige direkte Kinder wie p innerhalb eines dl erkennen.
- Die ausgewählte Beschreibungsliste nach der Korrektur erneut prüfen.
- Strukturelle Probleme in der Reihenfolge von Begriffen und Beschreibungen melden.
Im Kontext zu entscheiden
- Entscheiden, ob ein Hinweis außerhalb der Liste steht oder einen bestimmten Begriff beschreibt.
- Prüfen, ob Werte und Erklärungen fachlich den richtigen Begriffen zugeordnet sind.
- Die Verständlichkeit mit assistiven Techniken und bei veränderten Inhalten beurteilen.