Listenpunkt ohne Liste (listitem)

Die Regel listitem meldet ein <li>, das nicht direkt in einer Liste steht – sein Elternelement ist ein <div>, ein <nav> oder ein <ul>, dessen Rolle geändert wurde. Screenreader können dann nicht erkennen, dass die Punkte zusammengehören und wie viele es sind. Die Lösung: Jedes <li> steht direkt in einem <ul>, <ol> oder <menu>.

Was die Regel bedeutet

Ein <li> ist nur im Verhältnis zu seiner Liste ein Listenpunkt. Die Regel prüft jedes <li> ohne role-Attribut und schaut auf das direkte Elternelement. Sie ist erfüllt, wenn dieses die Rolle „list“ hat – ein <ul>, <ol> oder <menu> ohne eigene Rolle oder ein beliebiges Element mit role="list" – oder wenn es role="none" bzw. role="presentation" trägt.

Sie schlägt an, wenn das Elternelement etwas anderes ist oder eine Liste, deren Rolle ersetzt wurde, etwa <ul role="navigation"> oder <ul role="menubar">. Ein <li> mit eigener role wird übersprungen. Versteckte Elemente bleiben unberücksichtigt.

listitem schaut vom Punkt nach oben, die Partnerregel list von der Liste nach unten. Ein Wrapper-<div> zwischen <ul> und <li> verletzt beide.

Wen es betrifft

Blinde und sehbehinderte Menschen, die mit Screenreader oder Braillezeile arbeiten. In einer echten Liste sagt der Screenreader „Liste, 4 Einträge“ und kann die Position eines Punkts nennen, etwa „2 von 4“ – Orientierung, die Sehende aus Aufzählungszeichen und Abständen gewinnen. Einem <li> ohne Liste fehlt das: Die Punkte werden als lose Zeilen vorgelesen, ohne Anzahl und ohne erkennbares Ende. Bei Menüs und Brotkrumen lässt sich so schwer abschätzen, wie lang die Liste ist, bevor man sie überspringt.

Warum die Prüfung anschlägt

• Teilvorlagen ohne ihre Liste: Ein Brotkrumen- oder Menü-Template gibt <li>-Elemente in ein <div> oder <nav> aus.
• Rolle ersetzt statt umschlossen: <ul role="navigation"> als Landmark gedacht – damit verschwindet die Liste, die das <li> braucht.
• ARIA-Menüs und Tab-Listen: <ul role="menubar"> oder role="tablist", die <li>-Elemente behalten ihre Standardrolle.
• Wrapper-<div>s von Slider-Bibliotheken oder Komponenten zwischen <ul> und den Punkten.
• Kopierte Schnipsel: <li>-Elemente, die ohne die umgebende Liste in einen CMS-Textblock eingefügt wurden.

So beheben Sie es

Geben Sie jedem <li> eine Liste als direktes Elternelement. Für ein Landmark umschließen Sie die Liste mit <nav>, statt ihre Rolle zu ändern.

<!-- Vorher: Punkte in einem div und ein ul mit ersetzter Rolle -->
<div class="breadcrumb">
  <li><a href="/">Startseite</a></li>
  <li><a href="/shop/">Shop</a></li>
</div>
<ul class="main-menu" role="navigation">
  <li><a href="/ueber-uns/">Über uns</a></li>
</ul>

<!-- Nachher: nav liefert das Landmark, die Listen behalten ihre Rolle -->
<nav class="breadcrumb" aria-label="Brotkrumen">
  <ol>
    <li><a href="/">Startseite</a></li>
    <li><a href="/shop/">Shop</a></li>
  </ol>
</nav>
<nav aria-label="Hauptmenü">
  <ul class="main-menu"><li><a href="/ueber-uns/">Über uns</a></li></ul>
</nav>

Wenn Sie tatsächlich eine ARIA-Menüleiste bauen – die meisten Website-Navigationen sollten keine sein –, ist das <li> nur ein Wrapper und bekommt role="none":

<!-- Eine Menüleiste wie in einer Anwendung: das li tritt für das menuitem zurück -->
<ul role="menubar" aria-label="Dokument-Aktionen">
  <li role="none"><button type="button" role="menuitem">Speichern</button></li>
  <li role="none"><button type="button" role="menuitem">Drucken</button></li>
</ul>

So prüfen Sie es von Hand

1. Wählen Sie in den Entwicklertools des Browsers ein <li> und öffnen Sie den Bereich Barrierefreiheit: Seine Rolle sollte „listitem“ sein, die seines Elternelements „list“.
2. Gehen Sie mit einem Screenreader durch Menü oder Brotkrumen. Hören Sie die Liste und die Zahl ihrer Einträge?
3. Prüfen Sie besonders Navigation, Brotkrumen, Footer und Schlagwortlisten – dort verlieren <li>-Elemente am häufigsten ihre Liste.
4. Die Regel sieht nur <li>-Elemente. Ob eine Gruppe von <div>s oder Links, die wie eine Liste aussieht, eine sein sollte, erkennt sie nicht; das prüfen Sie von Hand.

Zugehöriges WCAG-Kriterium

1.3.1 Info und Beziehungen, Stufe A: Die Gruppierung, die man sieht, muss im Markup stehen. Verwandt: 4.1.2 Name, Rolle, Wert für ARIA-Widgets wie Menüs, in denen jeder Teil die Rolle braucht, die das Muster vorsieht.

So meldet Reviseberg diese Regel

Reviseberg führt listitem auf jeder gecrawlten Seite aus. Jedes <li> ohne passendes Elternelement ist ein Vorkommen. Ein fehlerhaftes Menü-Template mit sechs Punkten erscheint deshalb sechsmal auf 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 – so wird ein Fix im Template auf einen Blick sichtbar. Im Detail sehen Sie Selektor und HTML-Ausschnitt jedes Punkts und alle betroffenen Seiten. Mit Begründung können Sie einen Befund als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.

Ein sauberes Ergebnis bei dieser Regel macht 1.3.1 allein noch nicht zum Bestehen: Automatische Prüfungen decken das Kriterium nur teilweise ab, den Rest muss ein Mensch prüfen.

Verwandte Regeln

• undefined – die andere Hälfte: eine Liste mit Kindern, die keine Listenpunkte sind.
• undefined – dasselbe Problem bei ARIA-Rollen wie menuitem oder tab.
• undefined – Inhalt außerhalb der Landmarks, oft der nächste Befund nach einer Korrektur der Navigation.

Jedes Menü und jede Liste Ihrer Website prüfen – kostenloser Scan