A: < li>-Elemente müssen in einem < ul>- oder < ol>-Element enthalten sein (WCAG 1.3.1)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass <li>-Elemente semantisch korrekt verwendet werden.

Das bedeutet

Jedes <li> darf nur direktes Kind von <ul> oder <ol> sein. Ein <li> außerhalb einer Liste oder als Kind anderer Container (z. B. <div>, <section>) ist ungültig.

Auswirkung

Screenreader kündigen Anzahl und Struktur der Liste nicht korrekt an. Orientierung und Tastaturnavigation leiden, Nutzerinnen und Nutzer übersehen Inhalte. Verstoß gegen WCAG 1.3.1.

Empfehlung

• Immer <li> in <ul> oder <ol> kapseln.

• Für Unterpunkte verschachtelte Listen innerhalb eines <li> verwenden.

• Keine Layoutcontainer als Eltern von <li> nutzen; Styling via CSS auf <li>, nicht durch zusätzliche Wrapper.

Beispiel

Problematisch

 <div class="features">
  <li>Schneller Versand</li>
  <li>Sichere Zahlung</li>
</div>

Besser

 <ul class="features">
  <li>Schneller Versand</li>
  <li>Sichere Zahlung</li>
</ul>

Verschachtelt (korrekt)

 <ol>
  <li>Bestellung
    <ul>
      <li>Warenkorb</li>
      <li>Kasse</li>
    </ul>
  </li>
</ol>

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