A: < ul> and < ol> must only directly contain < li>, < script> or < template> elements (WCAG 1.3.1)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that lists are correctly structured.

This means

Direct children of <ul> or <ol> must be exclusively <li>, <script>, or <template>. Elements like <div>, <p>, <span>, or components must not be directly under the list.

Impact

Screen readers and keyboard navigation interpret the structure incorrectly. Users lose orientation; the number and order of list items are not reliably announced. Violation of WCAG 1.3.1.

Recommendation

• Wrap each list item in a <li>.

• Encapsulate additional content in <li> or create it as a nested list.

• Do not use layout containers directly as children of <ul>/<ol>.

Example

Problematic

<ul>
  <div>Shipping</div>
  <li>Payment</li>
  <p>Contact</p>
</ul>

Better

<ul>
  <li>Shipping</li>
  <li>Payment</li>
  <li>Contact</li>
</ul>

Nested (correct)

<ul>
  <li>Products
    <ul>
      <li>New</li>
      <li>Sale</li>
    </ul>
  </li>
</ul>

Related WCAG criterion:
WCAG 1.3.1 - Info and Relationships