Fehlerhafte Listenstruktur (list)

Die Regel list meldet ein <ul> oder <ol>, dessen direkte Kinder nicht alle Listenpunkte sind – ein Wrapper-<div>, eine Überschrift, loser Text oder eine Unterliste neben den Punkten. Screenreader nennen dann eine falsche Anzahl oder verlieren die Liste ganz. Die Lösung: Jedes direkte Kind wird ein <li>, alles andere kommt in den Listenpunkt oder aus der Liste heraus.

Was die Regel bedeutet

In HTML darf ein <ul> oder <ol> nur <li>-Elemente enthalten (dazu <script> und <template>, die nie angezeigt werden). Die Liste teilt assistiven Technologien mit, wie viele Punkte es gibt und wo jeder beginnt. Das funktioniert nur, wenn die Struktur genau Liste → Punkt ist.

Die Regel prüft jedes <ul> und <ol> ohne role-Attribut. Sie schlägt an, wenn ein direktes Kind

• ein anderes Element ist als <li> oder ein Element mit role="listitem",
• sichtbarer Text direkt in der Liste ist,
• oder wenn alle <li> der Liste eine andere Rolle bekommen haben.

Listen mit eigener role überspringt sie – dafür gelten Regeln wie aria-required-children. Für Definitionslisten (<dl>) gibt es eigene Regeln. Elemente, die vor assistiven Technologien verborgen sind, bleiben unberücksichtigt.

Wen es betrifft

Blinde und sehbehinderte Menschen, die mit Screenreader oder Braillezeile arbeiten. Ein Screenreader sagt beim Betreten „Liste, 5 Einträge“, springt von Punkt zu Punkt und meldet das Ende der Liste. Ein Wrapper-<div> oder ein fremdes Element bricht das: Die Anzahl stimmt nicht, oder Punkte werden als loser Text vorgelesen, ohne ihren Platz in der Liste.

Warum die Prüfung anschlägt

• Slider- und Karussell-Bibliotheken, die ein Track-<div> zwischen <ul> und Folien setzen.
• Komponenten-Frameworks, in denen eine Listenpunkt-Komponente ein eigenes <div> um das <li> rendert.
• Verschachtelte Listen an der falschen Stelle: Der Texteditor setzt die Unterliste neben den Punkt statt hinein.
• Gruppentitel in der Liste: ein <h3> oder <p> als Zwischenüberschrift zwischen den Punkten.
• Trennzeichen als Text: ein | oder · zwischen den Punkten einer Footer-Liste.
• Menüs, in denen alle <li> role="none" bekommen haben, das <ul> aber seine Listenrolle behielt.

So beheben Sie es

Machen Sie jedes direkte Kind der Liste zu einem <li>. Wrapper gehören um die Liste oder in den Punkt, Unterlisten in das <li>, zu dem sie gehören, Trennzeichen ins CSS.

<!-- Vorher: Ein Slider packt die Punkte in ein div innerhalb des ul -->
<ul class="product-slider">
  <div class="slider__track">
    <li class="product-card"><a href="/tassen/">Tassen</a></li>
    <li class="product-card"><a href="/teller/">Teller</a></li>
  </div>
</ul>

<!-- Nachher: Der Wrapper steht außen, die li sind direkte Kinder -->
<div class="slider__track">
  <ul class="product-slider">
    <li class="product-card"><a href="/tassen/">Tassen</a></li>
    <li class="product-card"><a href="/teller/">Teller</a></li>
  </ul>
</div>

Ebenso bei einer verschachtelten Liste: Sie gehört in ihren übergeordneten Punkt.

<!-- Vorher: Die Unterliste steht neben „Shop“, nicht darin -->
<ul class="sitemap">
  <li><a href="/shop/">Shop</a></li>
  <ul><li><a href="/shop/tassen/">Tassen</a></li></ul>
</ul>

<!-- Nachher: Die Unterliste ist Teil des Punkts „Shop“ -->
<ul class="sitemap">
  <li><a href="/shop/">Shop</a>
    <ul><li><a href="/shop/tassen/">Tassen</a></li></ul>
  </li>
</ul>

Lässt sich eine Slider-Bibliothek nicht anpassen, prüfen Sie, ob sie ein eigenes Element als Liste verwenden kann. Sonst ist es besser, die Folien in einfache <div>s zu setzen und auf das Listen-Markup zu verzichten, als eine kaputte Liste zu behalten.

So prüfen Sie es von Hand

1. Öffnen Sie in den Entwicklertools des Browsers den Barrierefreiheitsbaum und wählen Sie die Liste: Jedes Kind sollte die Rolle „listitem“ haben.
2. Springen Sie mit einem Screenreader zur Liste (L in NVDA und JAWS). Entspricht die angesagte Zahl der Einträge dem, was Sie sehen?
3. Suchen Sie auf der sichtbaren Seite nach Dingen, die wie Listen aussehen – Reihen von Links, Schritte, Merkmale mit Aufzählungs-Icons – und prüfen Sie, ob sie als Liste ausgezeichnet sind.
4. Die Regel prüft nur Listen, die es gibt. Inhalt, der wie eine Liste aussieht, aber aus <div>s oder <br>-Zeilenumbrüchen besteht, fällt nicht auf und verbirgt trotzdem seine Struktur; dieser Teil von 1.3.1 braucht einen Menschen.

Zugehöriges WCAG-Kriterium

1.3.1 Info und Beziehungen, Stufe A: Sichtbare Struktur muss auch im Markup vorhanden sein. Verwandt: 1.3.2 Bedeutungsvolle Reihenfolge, denn die Reihenfolge der Punkte im Code ist die Reihenfolge, in der sie vorgelesen werden.

So meldet Reviseberg diese Regel

Reviseberg führt list auf jeder gecrawlten Seite aus. Jede fehlerhafte Liste ist ein Vorkommen. Ein Slider oder Menü im Seiten-Template erscheint deshalb auf fast jeder Seite. In der Befundliste steht die Regel mit Schweregrad, WCAG 1.3.1 auf Stufe A, der Zahl der Elemente und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail sehen Sie Selektor und HTML-Ausschnitt jeder Liste und alle betroffenen Seiten. Mit Begründung können Sie einen Befund als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren – „nicht behebbar“ passt zu einem Drittanbieter-Widget, das Sie nicht ändern können; jede Entscheidung wird protokolliert.

Ein sauberes Ergebnis bei dieser Regel macht 1.3.1 allein noch nicht zum Bestehen: Ob Inhalt, der wie eine Liste aussieht, als Liste ausgezeichnet ist, muss ein Mensch beurteilen, und automatische Prüfungen decken das Kriterium nur teilweise ab.

Verwandte Regeln

• undefined – die andere Hälfte: ein <li>, das in keiner Liste steht.
• undefined – dasselbe Problem bei ARIA-Rollen wie role="list" oder role="menu".
• undefined – ein weiterer Teil der Seitenstruktur.

Listenstruktur Ihrer ganzen Website prüfen – kostenloser Scan