Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

List item not within valid parent (WCAG Level A Issue)

How to fix the web accessibility issue of list items not contained within a parent list — Lumar Web Accessibility Wiki

Structure - Lumar Website Accessibility Issues Thumbnail

What does this accessibility issue mean?

Issue summary: List item (<li>) not contained within parent list

Any list item (<li>) tag used on your website should be contained with a parent list — either an ordered list (<ol>) or unordered list (<ul>)

Invalid list items that are not nested within a parent list can lead to confusion and incorrect interpretations by assistive technologies like screen readers, making it difficult for users with disabilities to access and understand the content of a list.


Ensure that all list items (<li>) on a page are contained within a parent list element (<ol> or <ul>). 

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: List item not within valid parent (WCAG Level A Issue)

 	<li>Product 1</li>
 	<li>Product 2</li>
 	<li>Product 3</li>

The above HTML violates the list item accessibility rule because the <ul> <li> elements are not contained within a parent <ul> or <li style="list-style-type: none;"> <ol> element.

List items, represented by <li>, should always be included in a list, either ordered (<ol>) or unordered (<li style="list-style-type: none;"> <ul>). Accessibility tools rely on list items being properly contained within their appropriate list elements.


How to fix "List item not within valid parent (WCAG Level A Issue)" issue

 	<li>Product 1</li>
 	<li>Product 2</li>
 	<li>Product 3</li>

In this corrected version, I've added a <ul> element around the <li> elements. This tells screen readers and other assistive technologies that there is a list beginning at the <ul>, and each <li> is an item in that list.

This follows the WCAG guideline 1.3.1: Info and Relationships, which require that information and relationships conveyed through presentation can be programmatically determined.

In this case, the relationship that 'Product 1', 'Product 2', and 'Product 3' are items in a list. The use of proper list structure will improve the accessibility of your code by allowing assistive technology users to understand and navigate the content more easily.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform