A: < li> elements must be contained in a < ul> or < ol> (WCAG 1.3.1)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that <li> elements are used semantically correctly.

This means

Each <li> may only be a direct child of <ul> or <ol>. An <li> outside a list or as a child of other containers (e.g. <div>, <section>) is invalid.

Impact

Screen readers do not correctly announce the number and structure of the list. Orientation and keyboard navigation suffer, users overlook content. Violation of WCAG 1.3.1.

Recommendation

• Always wrap <li> in <ul> or <ol>.

• For subitems use nested lists inside an <li>.

• Do not use layout containers as parents of <li>; style via CSS on <li>, not through additional wrappers.

Example

Problematic

<div class="features">
  <li>Fast shipping</li>
  <li>Secure payment</li>
</div>

Better

<ul class="features">
  <li>Fast shipping</li>
  <li>Secure payment</li>
</ul>

Nested (correct)

<ol>
  <li>Order
    <ul>
      <li>Shopping cart</li>
      <li>Checkout</li>
    </ul>
  </li>
</ol>

Related WCAG criterion:
WCAG 1.3.1 - Info and Relationships