What This Rule Checks
For users who rely on assistive technologies, such as screen readers, list items need to be properly formatted to ensure accessibility. When list items are not placed within appropriate parent elements, like <ul>, <ol>, or <menu>, screen readers may not correctly interpret the relationships between these items. This can lead to confusion and make it harder for users to navigate and understand the content.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deaf users, who cannot hear audio content and rely on captions or transcripts; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Orphaned list items are not recognized as part of a list by assistive technologies. Screen readers will not announce list context (e.g., “item 2 of 5”), removing important structural information.
How to Fix
Ensure that each <li> element is a child of an appropriate parent container, such as <ul>, <ol>, or <menu>.
Code Examples
<!-- li element outside of a list -->
<div> <li>Orphaned item</li></div>
Copy
<!-- li properly nested in ul or ol -->
<ul> <li>Properly nested item</li></ul>
Copy
Common Mistakes to Avoid
- Placing <li> inside a <div> or <nav> without a <ul>/<ol> wrapper.
- Using role=”listitem” without a parent role=”list”.
- Restructuring HTML that accidentally orphans list items from their list container.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.
Related WCAG Criteria
- 1.3.1: Info and Relationships