Listitem

What it is

In HTML, a list item (`<li>`) is only meaningful when it lives inside a list container — either an unordered list (`<ul>`) or an ordered list (`<ol>`). When a `<li>` tag appears on its own, without that parent wrapper, the HTML is technically invalid and breaks the expected structure. This often happens when a developer copies a navigation menu, product feature list, or footer links and accidentally removes the surrounding `<ul>` or `<ol>` tags, or when a theme or page-builder outputs `<li>` tags outside of a proper list container.

Why it matters

Screen readers used by blind and low-vision shoppers rely on correct list structure to announce items as "list of 5 items" and let users jump between them efficiently. An orphaned `<li>` breaks that experience — the screen reader may skip the item entirely or read it confusingly, making navigation menus, feature bullet points, and product lists unusable. This violates WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which is a Level A requirement — the lowest acceptable bar — meaning failing it creates real legal risk under laws like the ADA (US), AODA (Canada), and EAA (EU). Beyond legal exposure, an inaccessible store loses business from the estimated 1-in-5 shoppers who have a disability, and invalid HTML can subtly harm how search engines parse and index your page content.

How to fix it

1. Identify every `<li>` element on the page that does NOT have a `<ul>` or `<ol>` as its direct parent — your scanner will flag the specific location.
2. Open the relevant template, theme file, or page-builder block that outputs that HTML.
3. Wrap the orphaned `<li>` element(s) in the correct list tag: use `<ul>` for unordered/bulleted items (navigation links, feature lists) or `<ol>` for numbered/sequential items (steps, rankings).
4. If the `<li>` was placed outside its list by mistake (e.g. a stray closing `</ul>` too early), find and restore the missing closing tag so all `<li>` items fall inside the container.
5. If custom CSS was used to style a `<li>` without needing list semantics at all, replace the `<li>` with a `<div>` or `<span>` and restyle — only use `<li>` when the content is genuinely a list item.
6. Re-test the page with a browser accessibility checker (e.g. axe DevTools browser extension) to confirm the violation is resolved.

<!-- ❌ WRONG: <li> with no list parent -->
<li>Free shipping over $50</li>
<li>30-day returns</li>

<!-- ✅ CORRECT: <li> items wrapped in <ul> -->
<ul>
  <li>Free shipping over $50</li>
  <li>30-day returns</li>
</ul>

<!-- ✅ CORRECT for navigation menus -->
<nav aria-label="Main">
  <ul>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN