listitem

Description

<li> (list item) elements must be contained within a <ul> (unordered list) or <ol> (ordered list) parent element. Using <li> outside of these list containers breaks the semantic structure of the list. Screen readers rely on proper list structure to announce the number of items in a list and to allow users to navigate between list items efficiently.

Example

In the following example, <li> elements are placed inside a <div> instead of a <ul> or <ol>. Screen readers cannot identify these as list items or convey the list structure to users, breaking the listitem rule.

In contrast, the following code snippet wraps all <li> elements in a <ul> element. Screen readers correctly identify this as a list and can announce the number of items, and the code does not break the listitem rule.

How to fix?

Check if your site uses <li> elements outside of a <ul> or <ol> container. If so:

• Wrap the <li> elements in a <ul> element if the list is unordered (for example, navigation links or feature lists). This is the recommended solution.
• Wrap the <li> elements in an <ol> element if the order of items is meaningful (for example, steps in a process).
• If you are using <li> purely for styling and the items do not represent a list, replace them with semantically appropriate elements such as <p> or <span>.

Reference

• WCAG 1.3.1: Info and Relationships
• HTML: The li element