Problem
Beim Einsatz des Elementor Loop Grid setzt Elementor automatisch: role=“list“ auf den Grid-Wrapper.
Lighthouse / Google meckert jedoch, wenn die direkten Kinder dieses Wrappers kein role=“listitem“ besitzen:
Elements with role=“list“ must contain children with role=“listitem“
Da Loop Grid keine echten
<ul>/<li>-Elemente rendert, sondern <div>oder <article>, fehlt diese explizite Rolle.
Ursache
ARIA verlangt folgende Struktur: role=“list“ → direkte Kinder mit role=“listitem“
HTML5-Elemente wie <article><article> gelten nicht automatisch als Listenelemente innerhalb eines ARIA-Lists.
Lösung im Loop Grid
1. Wrapper prüfen
Der Grid-Wrapper erhält automatisch: role=“list
Hier ist keine Änderung notwendig.
2. Loop Item anpassen
Im Loop Template:Äußersten Container auswählen
Erweitert → Attribute
Eintragen: role|listitem
Wichtig:
Das Attribut muss am äußersten Element des Loop Items sitzen.
Es darf kein zusätzlicher Wrapper zwischen role=“list“ und role=“listitem“ liegen.
Technisch korrektes Ergebnis (DOM-Struktur)
So sollte es im Frontend aussehen:
<div class=“elementor-loop-container“ role=“list“><article class=“loop-item“ role=“listitem“>…</article><article class=“loop-item“ role=“listitem“>…</article></div>
Wann ist ARIA nicht nötig?
Wenn echtes Listen-Markup verwendet wird:
<ul>
<li>…</li>
</ul>
Dann sind zusätzliche ARIA-Rollen überflüssig.
Loop Grid verwendet jedoch kein <ul>/
<li>,
daher ist role=“listitem“ erforderlich.
Typische Fehlerquellen
- role=“listitem“ sitzt nicht am äußersten Container
- zusätzliche Wrapper zwischen list und listitem
- Rolle mehrfach verschachtelt
- versehentlich list-item statt listitem verwendet
Korrekt ist: role=“listitem“ ohne Bindestrich.