| name | listitem |
| description | Use when applies to HTML documents with `<li>` elements. Also applies to custom ARIA lists where `role='listitem'` must be owned by `role='list'`. Common violations occur in templating systems where list markup is split across components or in CSS resets where developers use `<li>` for layout without proper list parents. |
| metadata | {"category":"accessibility","priority":"medium","difficulty":"beginner","estimatedTime":"5","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/accessibility/listitem"} |
Place list items within list containers
When a <li> element exists outside a list container, screen readers lose the ability to announce critical context: NVDA and JAWS will not say 'list of 5 items' or 'item 2 of 5' because there is no list context. VoiceOver may announce the orphan <li> as plain text without any group context, stripping users of the structural information that helps them understand how many items exist and where they are in the list.
Quick Reference
- Every
<li> element must have a direct parent of <ul>, <ol>, or <menu>
- Orphan
<li> elements are invalid HTML per the HTML Living Standard
- Screen readers announce list type and item count (e.g., 'list, 3 items') only when
<li> is inside a valid list container
- Similarly,
role='listitem' must be owned by a role='list' element per WAI-ARIA requirements
Check
Find all <li> elements in the DOM. For each, check that its direct parent element is <ul>, <ol>, or <menu>. Flag any <li> whose parent is <div>, <section>, <nav>, <span>, or any element other than those three. Also check role='listitem' elements to ensure their closest ancestor with a list-related role is role='list'.
Fix
For each orphan <li>: (1) Wrap it and any sibling <li> elements in the appropriate list container — use <ul> for unordered items or <ol> for sequentially ordered items. (2) If the <li> was being used purely for styling (e.g., a bullet point visual), replace it with a <div> or <p> and apply the visual style via CSS. (3) If inside a navigation element, ensure <nav><ul><li> nesting is maintained.
Explain
The HTML Living Standard specifies that <li> elements are only valid as children of <ul>, <ol>, or <menu>. This is a structural requirement, not a style preference. Screen readers use the list container to announce the list type ('bullet list' vs 'numbered list') and the total item count. Without the container, this context is lost entirely. Additionally, when list-style: none is applied to a <ul>, some browsers strip the list semantics — if this is intentional (e.g., a navigation menu), add role='list' to the <ul> to restore list semantics for screen readers.
Code Review
Review the rendered markup and interactive states that affect Place list items within list containers. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/listitem
