Lists contain invalid child elements
Automated check list, run with axe-core
- WCAG
- 1.3.1 Info and Relationships (Level A)
- Severity
- Moderate: a degraded experience
- Typical effort
- Quick win, under 1 hour
- Category
- Code quality
Who this affects
Screen reader users, who are told how many items a list contains.
Why it matters
Invalid nesting breaks the item count and the list semantics, so navigation menus built as lists stop behaving predictably.
How to fix it
Only <li> (plus script/template) may be direct children of <ul> and <ol>. Wrapper divs inside lists are the usual cause.
Check your own website
The free scan tests 3 pages against WCAG 2.2 A and AA in about 30 seconds. No sign-up.
Related checks: Code quality
- ARIA attributes used on the wrong elements
- ARIA roles that do not suit the element
- Braille-only ARIA attributes have no spoken equivalent
- ARIA attributes used in ways the role does not allow
- Deprecated ARIA roles are used
- The page body is hidden from assistive technology
- ARIA labels placed on elements that cannot carry them
- ARIA roles are missing their required attributes