WCAG 2.2 Fix Guide

How to Fix List Items Outside a List Element WCAG

The <li> element must always be a direct child of <ul> or <ol>. Orphaned <li> elements — those sitting outside a list container — create invalid HTML that screen readers handle unpredictably.

WCAG 2.2 Success Criterion 1.3.1 (Level A) axe-core: listitem

Why this matters

Screen readers announce list structure based on the parent container. An <li> without a <ul> or <ol> parent has no semantic meaning and may be announced incorrectly or skipped entirely by assistive technology.

Code examples

✗ Incorrect — fails WCAG
<!-- li without parent list -->
<li>Home</li>
<li>About</li>
<li>Contact</li>
✓ Correct — passes WCAG
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

How to fix it — step by step

  1. 1
    Always wrap <li> elements inside a <ul> or <ol>
  2. 2
    Check for navigation menus — a common place where <li> elements lose their parent <ul>
  3. 3
    Validate your HTML at validator.w3.org to catch orphaned list items
  4. 4
    If you need a single item with list styling, use a <ul> with one <li>
Reference: WCAG 2.2 Success Criterion 1.3.1 (Level A)

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.