In one paragraph
UL and OL must only directly contain LI, SCRIPT, or TEMPLATE elements describes the native list content model behind this finding. Keep ordinary items directly inside their list and put headings or layout wrappers in appropriate locations. The automated rule also has accessibility-tree exceptions, so a pass does not validate every HTML structure. Repair meaning and markup instead of adding roles merely to bypass a selector.
Why it matters
A list communicates related items and, for ol, meaningful order. A div containing several li elements directly inside ul can disrupt that model even if CSS makes the screen look correct. Fixing the container and item relationship preserves a useful structure for software and people.
Script-supporting elements have special allowances; that does not mean every other visible element can sit beside items. Nested lists belong within an item of the outer list. Introductory headings normally belong outside the list or within a genuinely intended item.
The native content model and an accessibility check's effective-role handling are not identical. A custom role can alter what one rule inspects without making the underlying HTML or interaction sound. Judge both rather than equating no violation with valid content.
How WebAuditOS evaluates this finding
The supplied list rule inspects applicable ul and ol elements without their own role override and examines direct children. It ignores documented script, template, whitespace, and hidden-content cases, while invalid visible children or non-whitespace text can fail. Its role-based item exceptions and overridden-list scope need version verification.
Serious impact maps to high severity. Hidden invalid content can become relevant when displayed, and lists given a role can leave this specific rule while remaining subject to other checks. The result does not assess all dynamic states or author intention.
How to fix it
- Inspect the actual rendered list and immediate children. Component wrappers, sliders, and CMS navigation code can inject elements not present in the simplest template preview.
- Use ordinary native items for ordinary lists. For example:
<ul class="products">
<li><a href="/products/chair">Chair</a></li>
<li><a href="/products/table">Table</a></li>
</ul>Place product headings or other grouped detail within the relevant li when it genuinely belongs to that item.
- Move a shared layout wrapper outside the list or apply the grid or flex class directly to the list. Avoid a div around several li siblings as a direct child of ul.
- Put a nested ul or ol inside its parent li. Check that visual indentation, source order, and semantic hierarchy tell the same story.
- Revisit third-party carousel output. If the content is genuinely a list, configure valid structural containers. If it is another widget, choose and implement that appropriate semantic and keyboard pattern instead of using ul solely for styling.
- Review CSS resets and assistive exposure. Some supported browser and screen-reader combinations can treat marker removal differently. Where an explicit list role is justified, retain valid children rather than using the resulting rule exclusion to conceal a broken structure.
- Test responsive and expanded states, loading placeholders, keyboard navigation, and dynamically added items. Hidden invalid children can become visible after an interaction the initial scan never exercised.
- Rescan this rule and the orphaned-li rule, then check actual reading order and relationships. A fix should improve the structure rather than just make the counter stop inspecting it.
What the fix can break
Changing wrappers affects direct-child selectors, flex or grid layout, and scripts counting children. Test behaviour after moving classes rather than assuming semantic edits are invisible.
Do not remove the only heading or explanatory text to make the child list valid. Relocate it meaningfully while preserving the information.
A presentation or listitem role can satisfy a particular role-based path without being the right native structure. Prefer simple valid HTML for simple lists and document justified widget behaviour separately.
Questions
Can a ul contain another ul directly?
For ordinary native nesting, put the child list inside a li of the parent list.
Are script and template allowed?
The native content model allows script-supporting elements, and the supplied rule treats those separately from ordinary item content.
Does role=list certify a repaired structure?
No. It can change rule applicability. Continue to verify actual items, semantics, and HTML content relationships.
Which related checks help?
Review list-item parents, description-list structure, and the automation limits guide.
What severity does this get in the report?
High. An axe finding takes its severity from the impact axe reports for the element that failed, and the report maps critical and serious to high, moderate to medium, minor to low. This rule is declared serious in axe-core 4.13.0, so a failure arrives as high - which is why the panel above states a conformance level rather than a severity.