Structure & headings

A List Item Sits Outside a List

When an `<li>` isn't inside a `<ul>` or `<ol>`, screen readers may not announce it as a list, so people lose the count and grouping.

listitemWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Why it matters

A proper list tells screen readers "list, 5 items" before reading. People can then skip it, or know how long it is.

An <li> on its own breaks that. Some screen readers say nothing, others say odd things. People who can't see the layout lose the grouping everyone else sees.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They don't hear "list, 5 items", so they can't tell how long the list is or skip past it.	High impact
Low-vision users (magnification)	Affected only if they also use a screen reader; the page looks the same.	Partial impact
Cognitive and neurodivergent users	Not affected visually, though reader tools that rely on structure may present it poorly.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	It fails WCAG 1.3.1 at Level A, the minimum. Australia's Disability Discrimination Act complaints and EN 301 549 both point to WCAG.	Moderate impact
Conversion	Rarely blocks a sale on its own, but messy navigation menus slow people down.	Low impact
SEO	Little real search benefit — don't sell it as one.	Low impact
Brand trust	Broken structure makes a site feel careless to screen reader users.	Low impact
Cost to fix	Usually a quick fix: wrap the items in `<ul>` or `<ol>`. Fix it in the shared template or component.	High impact

Fixing it in code

Menu items without a list

Don't

<nav>
  <li><a href="/">Home</a></li>
  <li><a href="/shop">Shop</a></li>
</nav>

A screen reader says: “Home, link. Shop, link.”

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/shop">Shop</a></li>
  </ul>
</nav>

A screen reader says: “List, 2 items. Home, link. Shop, link.”

A <ul> around the items gives screen readers the list and its count.

A wrapper div between the list and its items

Don't

<ul>
  <div className="row">
    <li>Free shipping</li>
    <li>Easy returns</li>
  </div>
</ul>

A screen reader says: “Free shipping. Easy returns.”

<ul className="row">
  <li>Free shipping</li>
  <li>Easy returns</li>
</ul>

A screen reader says: “List, 2 items. Free shipping. Easy returns.”

<li> must sit directly inside <ul> or <ol>, so move the styling onto the list.

Designer's handoff note

When you design a group of similar things — menu links, features, steps — label it as a list in your handoff notes.

Say whether order matters. Numbered steps need <ol>; others need <ul>.

Quick test

Tool

NVDA (opens in a new tab) (free on Windows)

Checklist

Step 1: Turn NVDA on and open the page.
Step 2: Press L to jump to the next list.
Step 3: Listen at each menu or group of items.

Pass: You hear "list" and the number of items before the first one.
Fail: The items are read one by one with no "list" or count, or L skips them.

What a green scan still misses

A scanner finds stray <li> elements. It can't find groups that should be lists but use plain <div>s or line breaks — look for those by eye.

Reference

Rule ID: listitem
Raised by: axe-core: “<li> elements must be contained in a <ul> or <ol>”
WCAG: 1.3.1 Info and Relationships (opens in a new tab) · Level A · since WCAG 2.0
Other standards: EN 301 549 9.1.3.1 · RGAA 9.3.1
Read more: Deque University: listitem (opens in a new tab)
Last reviewed: 14 October 2026