Ensuring List Items Are Contained Within Proper List Structures

Semantic list markup is essential for both HTML validity and accessibility of list items. When list items use the <li> element, they must be placed inside a parent <ul> or <ol> element. This is not only an accessibility requirement, but also a fundamental rule of valid HTML.

These parent list elements tell assistive technologies that the user has entered a list, what type of list it is, how many items it contains, and where each item sits within the sequence.

When <li> elements appear without a proper list parent or are placed incorrectly, list semantics are lost in the accessibility tree, which is a semantic representation of a webpage that assistive technologies (like screen readers) use instead of the raw HTML or visual layout. Screen readers typically announce the content as generic text rather than as part of a list, causing users to miss important structural context.

This is why all list content must be marked up using the correct parent list elements.

WCAG Success Criteria

The following WCAG 2.1 success criteria explain why proper list structure is important for accessible content.

1.3.1 Info and Relationships (Level A)

Information and relationships conveyed visually must also be represented programmatically so that assistive technologies can interpret them.

Example:
Placing list items directly inside a <ul> element allows a screen reader to announce the list and the number of items it contains.

1.3.2 Meaningful Sequence (Level A)

Content must follow an order that preserves meaning.

Example:
Using an <ol> element ensures that numbered steps are announced in the correct sequence for screen reader users.

4.1.2 Name, Role, Value (Level A)

Each user interface component must accurately expose its role and relationships.

Example:
When a list item is not inside a <ul> or <ol>, assistive technologies cannot recognise it as part of a list or announce its position within a group.

What Proper List Structure Does

Lists provide grouping and structure for related information. When list markup is used correctly, screen readers announce:

• That the user has entered a list
• The type of list (ordered or unordered)
• The total number of items
• The position of the current item within the list

This allows users to understand how items relate to one another and move through content with confidence.

Example

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

Here, the list is correctly defined as an unordered group of three items. A screen reader will typically announce something like “List with three items” and provide position information as the user navigates each item.

Why This Matters

Screen readers rely on semantic markup to provide orientation and context. When a list is marked up correctly, users receive clear structural cues that help them scan, compare, and understand grouped information.

If list items appear without a <ul> or <ol> parent, that structural information is lost. The content may still be read aloud, but it is no longer presented as a list, making it harder to understand, especially when reviewing steps, options, or grouped data.

Proper list markup also supports consistent keyboard navigation and predictable behaviour across assistive technologies.

Common Techniques for Proper List Structure

Use the following practices to ensure accessible lists:

• Wrap all <li> elements inside a <ul> or <ol> element
• Use <ul> for groups of related items where order does not matter
• Use <ol> when order or sequence is meaningful
• Avoid placing <li> elements inside non-list containers such as <div>
• For nested lists, ensure each level is wrapped in its own <ul> or <ol>

Incorrect Markup

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

Corrected Version

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

The parent list element now provides the required structure and semantics.

How to Fix the Problem

To correct improper list structures:

• Review your content for <li> elements that are not wrapped in a <ul> or <ol>
• Wrap every <li> element inside an appropriate parent list element
• Use <ul> for groups of related items where order does not affect meaning
• Use <ol> when the sequence or numbering of items is meaningful, and changing the order would alter understanding
• Ensure nested lists are properly structured, with each level wrapped in its own <ul> or <ol>
• Avoid using <div> or other non-list elements to visually simulate lists
• Test the page with a screen reader to confirm the list is announced with the correct type, item count, and position information

Example of Incorrect Use

<div>
  <li>Step one</li>
  <li>Step two</li>
</div>

Corrected Version

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

The list structure is now valid, meaningful, and accessible.

Who Is Affected

Incorrect list structures impact:

• Screen reader users who rely on list semantics to understand when a list begins and ends, how many items it contains, and their position within it
• Users with cognitive or learning disabilities who benefit from clearly grouped items, consistent ordering, and predictable list boundaries
• Anyone consuming structured content such as steps, options, menus, or grouped information, where understanding relationships between items is essential

Wrapping Up

Lists communicate grouping, order, and structure. When <li> elements are properly contained within <ul> or <ol> parent elements, assistive technologies can announce lists accurately and consistently.

In short, lists work best when they follow both HTML and accessibility standards. Ensuring correct list structure creates a clearer, more reliable experience for every user.