<li> elements must be contained in a <ul> or <ol>

HTML lists rely on a parent-child relationship between the list container (<ul> or <ol>) and its items (<li>). When an <li> element appears outside of a valid list parent, the browser and assistive technologies lose the semantic meaning of that element. The markup is technically invalid HTML, and the content is no longer recognized as part of a list structure.

This issue primarily affects screen reader users. When a screen reader encounters a properly structured list, it announces the list type and the total number of items — for example, “list, 3 items.” As the user navigates through the list, the screen reader announces each item’s position, such as “1 of 3.” This context is essential for understanding the structure of the content, anticipating its length, and navigating efficiently. Without a <ul> or <ol> parent, none of this information is communicated, leaving the user with no way to know the items are related or how many there are.

This rule relates to WCAG 2.2 Success Criterion 1.3.1: Info and Relationships (Level A), which requires that information, structure, and relationships conveyed through visual presentation are also available programmatically. A visual list of items implies a relationship between those items. Using correct semantic markup ensures that relationship is exposed to assistive technologies, not just conveyed visually through bullet points or numbering.

How to fix it

1. Identify any <li> elements that are not wrapped in a <ul> or <ol>.
2. Determine whether the list is unordered (no meaningful sequence) or ordered (sequence matters).
3. Wrap the <li> elements in the appropriate parent: <ul> for unordered lists or <ol> for ordered lists.

Choose <ul> when the order of items doesn’t matter (e.g., a list of ingredients). Choose <ol> when the order is meaningful (e.g., step-by-step instructions).

Examples

Incorrect: <li> elements without a list parent

These list items have no <ul> or <ol> container, so they are not recognized as a list by assistive technologies.

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

Correct: <li> elements inside a <ul>

Wrapping the items in a <ul> creates a valid unordered list that screen readers can announce properly.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Correct: <li> elements inside an <ol>

When the order of the items is meaningful, use an <ol> instead.

<ol>
  <li>Preheat the oven to 350°F.</li>
  <li>Mix the dry ingredients.</li>
  <li>Bake for 25 minutes.</li>
</ol>

Incorrect: <li> inside a <div> instead of a list parent

A <div> is not a valid parent for <li> elements, even if it looks correct visually.

<div>
  <li>Item one</li>
  <li>Item two</li>
</div>

Correct: Replace the <div> with a <ul>

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using ol, ul and dl for lists or groups of links

→