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.