Structure & headings

A List Contains Something Other than List Items

When a list holds items that aren't marked as list items, screen readers may miscount it or skip things — so people lose track of what's in it.

listWCAG 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

Screen readers announce a list and how many items it has, like "list, 5 items". That helps people know what's coming and move through it quickly.

A <ul> or <ol> should hold only <li> items directly. If it holds a <div>, a heading or loose text, the count can be wrong and some content may be skipped or read out of place.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear the wrong item count, or content read with no sign it belongs to the list.	High impact
Low-vision users (magnification)	Affected only if they also use a screen reader, as many do.	Partial impact
Cognitive and neurodivergent users	A miscounted or jumbled list read aloud is harder to follow.	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. Complaints under Australia's Disability Discrimination Act point to WCAG 2.2 Level AA, and EN 301 549 includes it.	Moderate impact
Conversion	Broken lists in menus, product grids or steps can make tasks slower for screen reader users.	Low impact
SEO	Search engines barely notice — don't sell it as a search win.	Low impact
Cost to fix	Usually a small markup change. Fix it once in the shared menu or card component.	High impact

Fixing it in code

A wrapper inside a menu list

Don't

<ul>
  <div class="item"><a href="/shop">Shop</a></div>
  <div class="item"><a href="/help">Help</a></div>
</ul>

A screen reader says: “Shop, link. Help, link. (No list or item count, in some screen readers.)”

<ul>
  <li class="item"><a href="/shop">Shop</a></li>
  <li class="item"><a href="/help">Help</a></li>
</ul>

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

Each child is now a real list item, so the count is right.

A heading placed inside the list

Don't

<ul>
  <h3>Fruit</h3>
  <li>Apples</li>
  <li>Pears</li>
</ul>

A screen reader says: “List, 2 items. Fruit, heading level 3. Apples. Pears.”

<h3>Fruit</h3>
<ul>
  <li>Apples</li>
  <li>Pears</li>
</ul>

A screen reader says: “Fruit, heading level 3. List, 2 items. Apples. Pears.”

The heading sits outside, so it labels the list instead of breaking it.

Designer's handoff note

When you design a menu, card grid or set of steps, mark it as a list in your notes. Say how many items it has, so developers build it as one.

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 to the item count, then press I to step through each item.

Pass: The count matches what you see, and every item is read in order.
Fail: The count is wrong, or some content is skipped or read outside an item.

What a green scan still misses

A scanner spots wrong children inside a list. It can't tell when something that looks like a list wasn't built as one at all.

Reference

Rule ID: list
Raised by: axe-core: “<ul> and <ol> must only directly contain <li>, <script> or <template> elements”
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: list (opens in a new tab)
Last reviewed: 14 October 2026