List items outside a list container

lists/item-outside-list

WCAG success criterion: 1.3.1 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Structure & Semantics
Default severity: medium
axe-core rule: lists/item-outside-list

Why we flag this

Screen reader users receive no announcement of the list's length/structure.

<li> outside <ul>/<ol>.

What the rule checks

Scope. Every rendered, not aria-hidden list item: <li> or role="listitem" without another explicit role.

Expectation. A list item whose nearest list ancestor is missing, or has turned into something other than a list by its role (tablist, menu), fails (F2-like: item semantics without a list). A list ancestor with role none/presentation passes the item's semantics on and is no finding. Located at the item. Known host gap until the a11y-rules release that declares this id in Meta::ids: findings arrive without a run record (FindingWithoutRun), not to be worked around here.

Source. WCAG 2.2 SC 1.3.1 Info and Relationships (F2, H48); HTML §4.4.5-4.4.10 list content models; WAI-ARIA 1.2 list/listitem/term/definition

Detection: shared; needs dom, computed_style.

Failing example

The check reports a violation here. Corpus case landmarks_and_lists. The page may contain further findings for other rules.

landmarks_and_lists.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Landmark nesting and list structure corpus case</title>
</head>
<body>
    <header>Site header</header>
    <main>
        <h1>Landmark nesting and list structure</h1>

        <footer role="contentinfo">Nested footer — contentinfo landmark should be top-level, not inside main</footer>

        <div role="listitem">Explicit ARIA listitem with no list ancestor</div>

        <ul aria-label="Empty list with no items"></ul>

        <p>
            <input type="radio" name="orphan-radio-test" style="width: 44px; height: 44px" aria-label="Orphan radio not in a group">
        </p>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case content_lists_responsive_role. The page may contain further findings for other rules.

content_lists_responsive_role.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive list markers</title>
    <style>
        @media (max-width: 600px) { .cards { list-style: none; padding: 0; } }
        @media (min-width: 601px) { .chips { list-style: none; padding: 0; } }
    </style>
    <style>
        nav a, .skip-link { display: inline-block; min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <a class="skip-link" href="#main">Skip to main content</a>
    <header>
        <p>City Library</p>
        <nav aria-label="Main"><a href="/" aria-current="page">Home</a> <a href="/catalogue">Catalogue</a> <a href="/visit">Visit</a></nav>
    </header>
    <main id="main">
        <h1>Responsive list markers</h1>
        <ul role="list" class="cards" id="cards"><li>Events</li><li>Courses</li></ul>
        <ol role="list" class="chips" id="chips"><li>Open</li><li>Closed</li></ol>
    </main>
    <footer><p>City Library, 1 Market Square</p></footer>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.