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.
Solution:
Ensure that all list items (<li>) on a page are contained within a parent list element (<ol> or <ul>).
Example HTML violation: List item not within valid parent (WCAG Level A Issue)
<div>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div> 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
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul> 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.
