• Success Criterion 1.3.1
  • Conformance level A

List Items Placed Outside Their Parent List Element

1.3.1 — Info and Relationships

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Malformed list structure: list items (li) outside list code (ul/ol), or lists containing non-li children, breaking item enumeration.

Example 

<li class="toolbar-item">Bold</li>
<ul class="toolbar">
  <li class="toolbar-item">Italic</li>
</ul>

Why it matters

A screen reader user hears "Bold" outside any list context, then a separate list starting with Italic, splitting one toolbar in two.

How to test

Inspect a list in DevTools: li elements must be direct children of ul/ol, and only li belongs inside — other tags or wrong nesting break item announcement.

How to fix

Every li needs a ul or ol parent; a stray li outside a list is announced as if the list never happened.

<ul class="toolbar">
  <li class="toolbar-item">Bold</li>
  <li class="toolbar-item">Italic</li>
</ul>

Outcome

A user hears toolbar, list of 2 items with Bold and Italic grouped as one set of controls.

Who is affected

Screen reader users navigating the toolbar can't tell that Bold and Italic belong to the same group of controls.

Learn more

Related scenarios