Praxisleitfaden Listeneinträge im HTML
Listeneinträge richtig einordnen
Erkennen Sie verwaiste Listeneinträge und stellen Sie ihren Zusammenhang wieder her.
listitemWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-listitem.html
Befund verstehen
Ein Aufzählungspunkt allein bildet keine Liste
Scanner-Signal
Die Regel listitem meldet .orphan-medal-entry: Dem li-Element fehlt ein passendes Listenelement als Elternknoten.
Technische Einordnung
- Regel
listitem- Referenz
- WCAG 1.3.1
In der „Kartei der beinahe gewonnenen Dinge“ steht der letzte Eintrag hinter dem schließenden ul-Tag. Sein Aufzählungspunkt ist sichtbar, doch im HTML gehört er unmittelbar zum Abschnitt und nicht zur Liste darüber.
Bedeutung im Nutzungskontext
Wer die Kartei mit einem Screenreader über Listen erschließt, erhält für diesen Eintrag keine verlässliche Zugehörigkeit zur benachbarten Sammlung. Die sichtbare Nähe ersetzt den strukturellen Zusammenhang nicht.
Struktur vor der Korrektur
section.loser-catalogue-import
├─ ul
│ └─ li: Zweiter Platz beim Papierfliegerfinale
└─ li.orphan-medal-entry: Einzelner Karteieintrag außerhalb der Liste
listitem: Verstoß am letzten Eintrag (Axe-Auswirkung: serious)Verwaiste Einträge im Bestand finden
Ein falsch geschlossener Listenblock kann einzelne Seiten betreffen. Prüfen Sie die Zugehörigkeit der markierten Einträge im veröffentlichten HTML.
Illustratives Beispiel · Listeneinträge ohne Liste
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: 18, 52, 91.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Zu welcher Sammlung gehört der Eintrag?
Prüfen Sie zuerst den Inhalt. Die passende Reparatur hängt davon ab, was zusammengehört.
Fundstelle zuordnen
Die Kartei mit dem abgelösten Eintrag
Der Ausschnitt zeigt den vollständigen Katalogabschnitt mit Überschrift, Eingabefeldern und Sammlung. Vorher steht die markierte Zeile unterhalb der farbig hinterlegten Liste; nachher liegt sie darin.
Der Karteieintrag gehört zur Sammlung oberhalb. Im Ausgangszustand ist diese Verbindung nur aus der Anordnung erschließbar. Die Markierung benennt genau den Eintrag, dessen HTML-Elternknoten korrigiert wird.
Struktur korrigieren
Den Eintrag vor das schließende Listentag setzen
Verschieben Sie den vorhandenen Eintrag in die ul-Liste. Sein Text und seine Klasse bleiben erhalten. Der gekürzte Code zeigt die relevante Eltern-Kind-Beziehung; die Bildbelege enthalten auch die übrigen Inhalte der Kartei.
Im CMS oder Template Bearbeiten Sie den Listenblock statt nur seine Einrückung. Bei dynamischen Komponenten muss das gerenderte li direkt in der Liste stehen; ein umgebender div-Container kann diese Beziehung unterbrechen.
Vorher
<ul>
<!-- Übriger Listeninhalt ausgelassen -->
<li>Zweiter Platz beim Papierfliegerfinale</li>
</ul>
<li class="orphan-medal-entry">
Einzelner Karteieintrag außerhalb der Liste
</li>Nachher
<ul>
<!-- Übriger Listeninhalt ausgelassen -->
<li>Zweiter Platz beim Papierfliegerfinale</li>
<li class="orphan-medal-entry">
Einzelner Karteieintrag außerhalb der Liste
</li>
</ul>Markierte Zeilen wurden geändert
Umsetzung absichern
Den Zusammenhang im gerenderten HTML erhalten
Listen entstehen oft aus wiederverwendeten Bausteinen. Prüfen Sie deren tatsächliche Ausgabe im Browser.
- 1
Suchen Sie den gemeldeten Eintrag in den Entwicklerwerkzeugen und kontrollieren Sie sein unmittelbares Elternelement.
- 2
Ordnen Sie zusammengehörige Einträge derselben Liste zu und halten Sie ihre Lesereihenfolge ein.
- 3
Legen Sie eine Unterliste innerhalb des zugehörigen li an, wenn sie einen übergeordneten Eintrag weiter aufgliedert.
- 4
Prüfen Sie nach Filterung, Nachladen und CMS-Änderungen, ob die Listenhülle mit den Einträgen erhalten bleibt.
Fehlversuche vermeiden
Diese Änderungen reparieren die Zugehörigkeit nicht
Nur den Einzug angleichen
CSS-Abstände oder display: list-item können den Eintrag optisch anpassen. Sie verschieben ihn nicht in die zugehörige HTML-Liste.
Jeden Eintrag einzeln umschließen
Eine eigene ul-Hülle pro Karte würde aus einer Sammlung mehrere Listen machen. Gruppieren Sie die fachlich zusammengehörigen Einträge gemeinsam.
Den Aufzählungspunkt entfernen
list-style: none entfernt nur das Zeichen. Der ungültig eingeordnete li-Knoten bleibt bestehen.
Den gesamten Listenblock für erledigt halten
Die Beispielkartei enthält zusätzlich einen div direkt in der ul-Liste. Dieser separate Befund gehört zur Regel list und wird durch die gezielte Korrektur des verwaisten Eintrags nicht behoben.
Derselbe Eintrag besteht den erneuten Test
Nach dem Verschieben meldet Axe für .orphan-medal-entry einen bestandenen listitem-Test. Der Text bleibt zur Wiedererkennung unverändert; sein Wortlaut „außerhalb der Liste“ beschreibt jetzt nur noch den ursprünglichen Zustand.
So prüfen Sie die Korrektur nach
- Das Elternelement des Eintrags ist jetzt ul; der ursprüngliche DOM-Knoten bleibt erhalten.
- Die vorhandene Liste enthält beide li-Einträge. Ihre Texte wurden nicht entfernt oder versteckt.
- Die vollständige Kartei erneut prüfen und weitere Befunde getrennt bearbeiten.
Bestätigt ist die Korrektur der Regel listitem an diesem Eintrag. Andere Fehler der Kalibrierseite und die inhaltliche Eignung der gesamten Listenstruktur sind damit nicht geprüft.
Struktur nach der Korrektur
ul
├─ li: Zweiter Platz beim Papierfliegerfinale
└─ li.orphan-medal-entry: Einzelner Karteieintrag außerhalb der Liste
Axe listitem: bestanden am unveränderten Zielknoten.
Die übrigen Inhalte der Liste sind hier ausgelassen.Prüfgrenzen kennen
Struktur automatisch prüfen, Gruppierung fachlich beurteilen
Die Regel prüft die technische Einordnung vorhandener li-Elemente. Ob Ihre Inhalte richtig gruppiert sind, verlangt Kontext.
Automatisch prüfbar
- Ein li-Element ohne geeigneten Listen-Elternknoten erkennen.
- Die betroffene Zeile mit Selektor und Bildausschnitt auffindbar machen.
- Die Regel nach einer Strukturänderung am selben Eintrag erneut ausführen.
Im Kontext zu entscheiden
- Entscheiden, welche Einträge eine gemeinsame Liste bilden und ob ihre Reihenfolge wesentlich ist.
- Nur optisch gebildete Listen aus Absätzen oder Symbolen erkennen.
- Mit einem Screenreader prüfen, ob Listengrenzen und verschachtelte Einträge verständlich erschließbar sind.