<ul> and <ol> must only contain <li>, <script>, <template>, or <style> as direct children.

Screen readers parse HTML list elements (<ul> and <ol>) and announce their structure to users. A screen reader might say "list with 5 items" when it encounters an ordered or unordered list, then let the user navigate item by item. This announcement depends on correct markup: each direct child of a <ul> or <ol> must be an <li> element (or one of the allowed non-rendered elements: <script>, <template>, or <style>).

When non-<li> elements like <div>, <span>, or <a> appear as direct children of a list, the browser's accessibility tree no longer reflects a proper list structure. Screen readers may miscount items, skip content, or fail to announce the list entirely. Users who rely on assistive technology lose the ability to understand how content is grouped and to navigate between items efficiently. Sighted users may not notice anything wrong because browsers are lenient about rendering, but the underlying semantics are broken.

This rule maps to WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), Level A. SC 1.3.1 requires that information and relationships conveyed through visual presentation are also available programmatically. A visual list with bullet points or numbers looks like a list, but if the HTML structure is invalid, assistive technology cannot convey that same relationship to the user.

How to fix it

The fix depends on why the non-<li> element is there in the first place.

If a <div> or <span> wraps content inside a list for styling purposes, remove the wrapper and apply the styles directly to the <li> element instead. The <li> element accepts any CSS you would put on a <div>.

If text or other content sits directly inside a <ul> or <ol> without any wrapper, wrap it in an <li>.

If the structure is more complex, such as a navigation menu where <a> elements are direct children of a <ul>, nest each <a> inside an <li>.

If the list needs to be split into groups (for example, with headings between items), consider using separate lists for each group rather than inserting headings directly inside the <ul> or <ol>.

Examples

Incorrect: <div> as a direct child of <ul>

<ul>
  <div>Apples</div>
  <div>Oranges</div>
  <div>Bananas</div>
</ul>

The <div> elements break the list structure. A screen reader cannot identify these as list items.

Correct: content wrapped in <li> elements

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

Incorrect: <a> elements as direct children of <ul>

<ul>
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</ul>

Correct: <a> elements nested inside <li>

<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Incorrect: wrapper <div> used for styling

<ul>
  <div class="list-item-wrapper">
    <li>First item</li>
  </div>
  <div class="list-item-wrapper">
    <li>Second item</li>
  </div>
</ul>

Here the <div> sits between the <ul> and its <li> children, which is invalid.

Correct: styles applied directly to <li>

<ul>
  <li class="list-item-wrapper">First item</li>
  <li class="list-item-wrapper">Second item</li>
</ul>

Incorrect: heading inserted directly inside a list

<ul>
  <h3>Fruits</h3>
  <li>Apples</li>
  <li>Oranges</li>
  <h3>Vegetables</h3>
  <li>Carrots</li>
  <li>Peas</li>
</ul>

Correct: separate lists with headings before each

<h3>Fruits</h3>
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

<h3>Vegetables</h3>
<ul>
  <li>Carrots</li>
  <li>Peas</li>
</ul>

This approach keeps each list valid while still grouping content under headings. Screen readers will correctly announce each list and its item count.

Learn more:

W3C Reference

Understanding WCAG 2.1: Info and Relationships

→

MDN Reference

HTML Element: ul - MDN

→

MDN Reference

HTML Element: ol - MDN

→