A: < ul>- und < ol>-Elemente dürfen unmittelbar nur < li>-, < script>- oder < template>-Elemente enthalten (WCAG 1.3.1)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass Listen korrekt strukturiert sind.

Das bedeutet

Direkte Kinder von <ul> oder <ol> müssen ausschließlich <li>, <script> oder <template> sein. Elemente wie <div>, <p>, <span> oder Komponenten dürfen nicht direkt unterhalb der Liste stehen.

Auswirkung

Screenreader und Tastaturnavigation interpretieren die Struktur falsch. Nutzerinnen und Nutzer verlieren Orientierung, Anzahl und Reihenfolge der Listenelemente werden nicht zuverlässig angekündigt. Verstoß gegen WCAG 1.3.1.

Empfehlung

• Jedes Listenelement in ein <li> setzen.

• Zusätzliche Inhalte in <li> kapseln oder als verschachtelte Liste anlegen.

• Keine Layoutcontainer direkt als Kind von <ul>/<ol> verwenden.

Beispiel

Problematisch

<ul>
  <div>Versand</div>
  <li>Zahlung</li>
  <p>Kontakt</p>
</ul>

Besser

<ul>
  <li>Versand</li>
  <li>Zahlung</li>
  <li>Kontakt</li>
</ul>

Verschachtelt (korrekt)

<ul>
  <li>Produkte
    <ul>
      <li>Neu</li>
      <li>Sale</li>
    </ul>
  </li>
</ul>

Verknüpfte WCAG-Kriterien:
WCAG 1.3.1 - Info und Beziehungen