Ensuring Lists Contain Only Valid Child Elements

Lists play an important role in structuring content on web pages. When developers add content elements other than list items directly within ordered or unordered lists, screen readers cannot correctly announce the list structure. This results in users missing essential information about how the content is organised.

Example:

<ul>
  <p>This paragraph is not a list item</p>
  <li>First item</li>
  <li>Second item</li>
</ul>

In this example, the <p> element is placed directly inside the <ul> instead of being wrapped in an <li>, making it an invalid list structure for assistive technologies.

Screen readers look specifically for the <li> element to announce items within a list. If other content elements appear at the same level as list items, the screen reader may not recognise the full list structure. This creates confusion, especially when users rely on list navigation shortcuts that depend on proper semantic markup.

This is why it is necessary to use only <li> elements as direct children of <ul> or <ol> elements, with allowances for non-content elements like script and template.

WCAG Success Criteria

The following WCAG 2.1 success criteria demonstrate why correct list markup is essential for clear communication.

1.3.1 Info and Relationships (Level A)
Information and relationships must be conveyed programmatically, not just visually.
Example:
A properly structured list that uses only <li> children communicates its structure directly to assistive technologies.

1.3.2 Meaningful Sequence (Level A) yh
Content must follow a logical reading order that users can understand.
Example:
Screen readers announce the number of items in a list before reading them, helping users understand the content’s scope.

4.1.2 Name, Role, Value (Level A)
Each component must accurately expose its role and meaning.
Example:
Content placed directly inside a ul or ol without being wrapped in an li element does not expose its relationship to the list structure.

What Proper List Structure Looks Like

Here is where your correct list example should go:

<p>These are a few of my favorite things</p>
<ul>
  <li>Raindrops on roses</li>
  <li>Whiskers on kittens</li>
  <li>Bright copper kettles</li>
  <li>Warm woolen mittens</li>
  <li>Brown paper packages tied up with strings</li>
  <li>Cream colored ponies</li>
  <li>Crisp apple streudels</li>
  <li>Doorbells and sleigh bells</li>
  <li>Schnitzel with noodles</li>
  <li>Wild geese that fly with the moon on their wings</li>
  <li>Girls in white dresses with blue satin sashes</li>
  <li>Snowflakes that stay on my nose and eyelashes</li>
  <li>Silver white winters that melt into springs</li>
</ul>

Why This Matters

Screen readers announce lists by identifying the list type and the total number of items, then reading each list item in sequence and providing shortcuts for list navigation. They communicate the total number of items, read each item in order, and provide shortcuts for navigating through lists. When content is placed directly inside a list container without wrapping it inside an li element, the screen reader cannot announce it as part of the list.

Without proper list semantics, users lose:

• The ability to know how many items are present
• The ability to navigate between items
• The clarity of how the content is organised

Using valid list markup preserves accessibility, clarity, and meaningful navigation.

Common Techniques for Proper List Structure

To maintain accessible and meaningful lists:

• Use only li elements as direct children of ul or ol elements.
• Wrap all content intended to be a list item inside an li tag.
• As per the HTML specification, only <li>, <script>, and <template> are permitted as direct children of <ul> and <ol>. All content must be wrapped in <li>.
• Do not place paragraphs, divs, or other content elements directly inside list containers.
• If you need complex content, nest additional elements inside an li element.

Below are placeholders for your incorrect and corrected examples:

Incorrect structure

<ul>
  <li>First item</li>
  <div>Additional content</div>
  <li>Second item</li>
</ul>

Correct structure

<ul>
  <li>First item</li>
  <li>Additional content</li>
  <li>Second item</li>
</ul>

Complex content correctly nested

<ul>
  <li>
    First item
    <div>Additional content</div>
  </li>
  <li>Second item</li>
</ul>

How to Fix the Problem

1. Identify any content placed directly inside ul or ol elements.
2. Wrap that content inside an li element.
3. If the content belongs to a nearby list item, move it inside that list item instead.
4. Update CSS to support proper semantic HTML, not to compensate for invalid structure.
5. Test with a screen reader to confirm the list is announced correctly.

Who Is Affected

Incorrect list structure impacts:

• Screen reader users
• Keyboard-only users navigating with list shortcuts
• Anyone who relies on a clear count or position of list items

Wrapping Up

Lists communicate information effectively only when they contain valid child elements. Using li elements for every content item ensures assistive technologies can announce the list structure accurately and support easy navigation.