How to Fix List Markup Errors WCAG 2.2

Why this matters

Screen readers announce list structure — 'list of 5 items'. This helps users understand grouped content like navigation menus, steps, and feature lists. Invalid list markup breaks this announcement and can cause screen readers to skip content entirely.

Code examples

<ul>
  <div class="item">First item</div>
  <p>Second item</p>
</ul>

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Wrapping divs go inside li -->
<ul>
  <li><div class="item">First item</div></li>
  <li><div class="item">Second item</div></li>
</ul>

How to fix it — step by step

1. 1
   Only put <li> elements as direct children of <ul> and <ol>
2. 2
   You can put divs and other elements inside the <li>, just not directly in the list
3. 3
   For navigation menus, wrap links in <li> elements inside a <ul>
4. 4
   Use <ol> for ordered/numbered lists, <ul> for unordered lists
5. 5
   Use <dl> (definition list) for name-value pairs like glossaries or metadata
6. 6
   Don't use list elements just for visual indentation — use CSS margin/padding instead

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.