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.
Solution:
Ensure that lists are structured correctly in your code, with at least one list item (<li>) included in each ordered or unordered list.
Example HTML violation: List contains invalid content element (WCAG Level A Issue)
<h2>Product List</h2>
<ul>
<li style="list-style-type: none;">
<ul>
<li>Product 1 Description</li>
</ul>
</li>
</ul>
<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>
<ul>
<li>Product 1 Description</li>
<li class="product2">Product 2 Description</li>
</ul> 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.
