Praxisleitfaden HTML-Listen
Listenstruktur im HTML richtig korrigieren
Ein Aufzählungspunkt allein macht noch keine verlässliche Liste. Prüfen Sie am konkreten Befund, welche Inhalte zu einem Eintrag gehören und welche außerhalb der Liste stehen müssen.
listWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-list.html
Befund verstehen
Die Liste enthält einen Absatz ohne Listeneintrag
Im Histologieprotokoll steht „Unsortierte Färbeprobe“ als Absatz direkt in der ul. Erst „Hämatoxylin“ ist als li ausgezeichnet. Die sichtbare Einrückung verdeckt, dass Beschreibung und Listeneintrag im HTML auf derselben Ebene liegen.
Warum das relevant ist
Wer per Screenreader durch Listen navigiert, ist auf die Zuordnung ihrer Einträge angewiesen. Ein Absatz direkt im Listencontainer lässt diese Beziehung unklar und kann die Ausgabe der Liste beeinträchtigen.
Scanner-Signal
Die Regel list meldet an .praeparat > ul ein unzulässiges direktes Kindelement: p.
- Regel
list- Referenz
- WCAG 1.3.1
Struktur vor der Korrektur
ul
p: Unsortierte Färbeprobe
li: Hämatoxylin
Befund list: p ist kein zulässiger direkter Inhaltsbaustein der Liste.Fehlerhafte Listen gezielt lokalisieren
Ein Absatz im Listencontainer kann auf wenigen Inhaltsseiten auftreten. Prüfen Sie dort die Abgrenzung zwischen Beschreibung und Einträgen.
Illustratives Beispiel · Absätze in Listen
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: 9, 37, 81.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Beschreibung, Eintrag oder Unterliste?
Entscheiden Sie zuerst, welche Beziehung der Text ausdrückt. Nur das falsche Tag auszutauschen kann aus einer Beschreibung versehentlich einen Listeneintrag machen.
Die Lehrskizze zeigt nur die direkten Kinder der geprüften ul. „Unsortierte Färbeprobe“ bleibt nach der Korrektur als Absatz vor ihr erhalten.
- Unsortierte Färbeprobep · beschreibt die gesamte Liste
- Hämatoxylinli · Listeneintrag
- Hämatoxylinli · Listeneintrag
Passende Umsetzung auswählen
Fundstelle im Kontext
Die Färbeprobe im vollständigen Protokoll
Der Ausschnitt zeigt die Überschrift, die Definitionen, die Färbeprobe und die anschließenden Tabellen. Die Markierung umfasst die betroffene Liste; der Fehler liegt in ihrer inneren HTML-Struktur.
„Unsortierte Färbeprobe“ beschreibt die Liste. Nach der Korrektur steht dieser Absatz davor; „Hämatoxylin“ bleibt der vorhandene Listeneintrag. Der daneben sichtbare Eintrag „Eosin“ außerhalb der Liste ist ein eigener listitem-Befund und wird hier nicht mitgeprüft.
Struktur korrigieren
Den beschreibenden Absatz vor die Liste setzen
Verschieben Sie das vorhandene p aus der ul. Damit enthält die Liste nur noch ihren li-Eintrag. Die Beschreibung bleibt unmittelbar davor lesbar; sie wird nicht als weiterer Farbstoff ausgegeben.
Im Editor oder Template Beenden Sie den Absatz vor Beginn der Aufzählung. Prüfen Sie im gerenderten HTML, ob der Editor zusätzliche p- oder div-Elemente direkt in den Listencontainer schreibt.
Vorher
<ul>
<p>Unsortierte Färbeprobe</p>
<li>Hämatoxylin</li>
</ul>Nachher
<p>Unsortierte Färbeprobe</p>
<ul>
<li>Hämatoxylin</li>
</ul>Markierte Zeilen wurden geändert
Im Projekt umsetzen
Die erzeugte Liste prüfen, nicht nur ihren Entwurf
Listen entstehen häufig aus wiederverwendbaren Komponenten oder formatierten Redaktionsinhalten. Korrigieren Sie die Stelle, die das ungültige Kindelement erzeugt.
- 1
Prüfen Sie die direkten Kinder von ul und ol im Browser: sichtbare Einträge gehören in li.
- 2
Lassen Sie Komponenten für einzelne Listenpunkte ein li als Wurzelelement ausgeben, wenn sie direkt im Listencontainer stehen.
- 3
Wählen Sie ol, wenn die Reihenfolge Bedeutung trägt, und ul für eine ungeordnete Aufzählung.
- 4
Testen Sie auch mehrzeilige Einträge, verschachtelte Listen und durch den Editor eingefügte Beschreibungen.
Fehlversuche vermeiden
Korrektes Aussehen ersetzt keine Listenstruktur
Aus jedem Absatz ein li machen
Die Beschreibung „Unsortierte Färbeprobe“ wäre dann ein zusätzlicher Listenpunkt. Entscheiden Sie anhand der Bedeutung, ob der Text tatsächlich ein Eintrag ist.
Einträge gemeinsam in ein div packen
Ein div direkt in ul oder ol verschiebt denselben Strukturfehler. Platzieren Sie Layout-Container innerhalb der jeweiligen li-Elemente.
Nur die Einrückung ändern
CSS kann Absatz und Eintrag optisch angleichen. Ihre Beziehung im HTML ändert sich dadurch nicht.
Benachbarte Fehler als erledigt behandeln
Das allein stehende „Eosin“ bleibt ein separater listitem-Fall. Auch die Definitionen und Tabellen des Protokolls benötigen eigene Prüfungen.
Dasselbe Listenelement besteht den erneuten Test
Axe meldet nach dem Verschieben des Absatzes für .praeparat > ul einen Pass der Regel list. Der Listencontainer ist derselbe geblieben; sein einziges direktes Kindelement ist jetzt li.
So prüfen Sie die Korrektur nach
- Prüfen Sie, dass „Unsortierte Färbeprobe“ vor der Liste steht und weiterhin vollständig vorhanden ist.
- Führen Sie list nach Veröffentlichung erneut an der betroffenen Seite aus.
- Kontrollieren Sie mit dem Screenreader die Grenze der Liste und die Zuordnung ihrer Einträge.
Bestätigt ist nur die Struktur dieser Liste für die Regel list. Andere Befunde im Protokoll sowie die inhaltlich passende Gruppierung bleiben gesondert zu prüfen.
Struktur nach der Korrektur
p: Unsortierte Färbeprobe
ul
li: Hämatoxylin
Re-Test list: bestanden am selben ul-Element. Beschreibung erhalten und vor die Liste verschoben.Prüfumfang einordnen
Was der Scanner erkennt und was Sie beurteilen
Die Regel kontrolliert direkte Kinder einer vorhandenen HTML-Liste. Ob eine Gruppe von Inhalten überhaupt eine Liste sein soll, ergibt sich aus ihrem Zweck.
Automatisch prüfbar
- Unzulässige direkte Inhalte wie p oder div in ul und ol erkennen
- Den betroffenen Listencontainer als Fundstelle ausweisen
- Die Struktur nach einer Korrektur mit derselben Regel erneut prüfen
Im Kontext zu entscheiden
- Beschreibung und eigentliche Einträge inhaltlich unterscheiden
- Passende Reihenfolge, Gruppierung und Verschachtelung beurteilen
- Ausgabe und Navigation der Liste mit assistiver Technik nachvollziehen