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

List contains invalid content element (WCAG Level A Issue)

How to fix the web accessibility issue of lists with invalid content elements. — Lumar Web Accessibility Wiki

Structure - Lumar Website Accessibility Issues Thumbnail

What does this accessibility issue mean?

Issue summary: List contains invalid content element

Ordered lists (<ol>) and unordered lists (<ul>) should contain one or more list items (<li>)

Assistive technologies like screen readers rely on properly structured HTML to convey text and context to their users.  

Missing or invalid list items can disrupt the semantic meaning of the list, resulting in a loss of context and coherence for all users, particularly those who rely on assistive technologies.


Ensure that lists are structured correctly in your code, with at least one list item (<li>) included in each ordered or unordered list. 

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 contains invalid content element (WCAG Level A Issue)

<h2>Product List</h2>
 	<li style="list-style-type: none;">
 	<li>Product 1 Description</li>
<div class="product2">Product 2 Description</div> 

In this example, we have a violation of the 'List contains invalid content' accessibility rule because we are including a <div> element as a child of a <ul> (unordered list) element. Per HTML5 definitions, only <li> (list item) elements should be direct children of <ul> <li style="list-style-type: none;"> <ul> or <li style="list-style-type: none;"> <ol> (ordered list) elements.

Here is the corrected HTML example code snippet:


How to fix "List contains invalid content element (WCAG Level A Issue)" issue

<h2>Product List</h2>
 	<li>Product 1 Description</li>
 	<li class="product2">Product 2 Description</li>

In this corrected code, we have replaced the <div> tag with an <ul> <li> tag for Product 2 Description. Now, all children of <ul> are <li> elements, which adheres to proper HTML5 standards and resolves the 'List contains invalid content' accessibility issue.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform