<ul> and <ol> must only directly contain <li>, <script> or <template> elements

According to the HTML specification, the only permitted content directly inside <ul> and <ol> elements are <li> elements, plus non-content elements like <script> and <template>. When you place other content elements — such as <div>, <span>, <p>, <a>, or plain text nodes — directly inside a list container, you create an invalid structure that breaks the semantic relationship between the list and its items.

Why This Matters

Screen readers announce lists in a specific way to help users navigate and comprehend grouped content. When a user encounters a properly structured list, their screen reader will typically announce something like “list, 5 items” and then allow the user to move through each item individually. This behavior depends entirely on the list being structured correctly.

When non-<li> content elements appear as direct children of <ul> or <ol>, screen readers may:

• Fail to announce the total number of items in the list
• Skip over improperly nested content entirely
• Present list items and non-list content in a confusing, disjointed manner

This primarily affects blind and deafblind users who rely on screen readers, but it also impacts anyone using assistive technology that parses the DOM structure to present content.

Related WCAG Success Criteria

This rule maps to WCAG 2.0, 2.1, and 2.2 Success Criterion 1.3.1: Info and Relationships (Level A). This criterion requires that information, structure, and relationships conveyed through visual presentation can be programmatically determined. When a list is visually presented as a group of related items but its underlying HTML structure is invalid, the relationship between the list container and its items cannot be reliably communicated to assistive technology.

How to Fix It

1. Ensure every content element inside a <ul> or <ol> is wrapped in an <li>. If you have <div>, <span>, <p>, <a>, or any other content element as a direct child of the list, move it inside an <li>.
2. Move non-list content outside the list. If you have headings, paragraphs, or other content that isn’t a list item, place it before or after the list element rather than inside it.
3. Nest sub-lists inside <li> elements. If you need a nested <ul> or <ol>, it must be placed inside an <li> of the parent list, not directly as a child of the parent list.

Examples

Incorrect: <div> elements directly inside a <ul>

<ul>
  <div>Apples</div>
  <div>Bananas</div>
  <div>Cherries</div>
</ul>

Screen readers cannot identify these <div> elements as list items.

Correct: <li> elements as direct children

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Incorrect: Heading placed directly inside a list

<ul>
  <h3>Fruits</h3>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Correct: Heading moved outside the list

<h3>Fruits</h3>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Incorrect: Nested list placed directly inside a <ul>

<ul>
  <li>Fruits</li>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
  </ul>
  <li>Vegetables</li>
</ul>

Correct: Nested list placed inside an <li>

<ul>
  <li>
    Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Incorrect: Link directly inside an <ol>

<ol>
  <a href="/step-1"><li>Step one</li></a>
  <a href="/step-2"><li>Step two</li></a>
</ol>

Correct: Link placed inside the <li>

<ol>
  <li><a href="/step-1">Step one</a></li>
  <li><a href="/step-2">Step two</a></li>
</ol>

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

→