List markup used incorrectly

What this means

A list element (<ul> or <ol>) contains children that are not <li> elements (or script/template elements). Screen readers announce the number of items in a list — incorrect markup causes the announced count to be wrong and the list structure to be confusing.

WCAG requirement

Success Criterion 1.3.1 — Info and Relationships: the structure conveyed visually (a list of items) must match the programmatic structure.

How to fix

1. Only use <li> as direct children of <ul> or <ol>: move any <div> wrappers or other elements inside the <li>, not between them
2. For navigation: <nav><ul><li><a href="...">Link</a></li></ul></nav> is the correct pattern
3. For custom components: if you need wrapper elements, place them inside the <li>, not around it