<li> elements must be contained in a <ul> or <ol>

Rule ID: listitem
Ruleset: axe-core 4.8
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
 

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact

Serious
Minor
Critical

Disabilities Affected

  • Blind
  • Deaf
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.0 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.2 (A)]

  • 1.3.1: MUST: Info and Relationships

    How to Fix the Problem

    Ensure that all list item li elements are wrapped inside of ul or ol parent elements.

    List items may be contained in either unordered (bullet) lists or ordered (sequentially numbered) lists.

    Screen readers notify users when they come to a list, and tell them how many items are in a list. Announcing the number of list items and the current list item helps listeners know what they are listening to, and what to expect as they listen to it. Child list item elements must be contained within the appropriate parent list elements enabling screen readers to inform the listener that they are listening to a list.

    Bad example

    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>

    Good example

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    Why it Matters

    For a list to be valid, it must have both parent and child elements. Parent elements can either be a set of ul tags or a set of ol tags. Child elements must be declared inside of these tags using the li tag.

    Screen readers notify users when they come to a list, and tell them how many items are in a list. Announcing the number of items in a list and the current list item helps listeners know what they are listening to, and what to expect as they listen to it.

    If you don't mark up a list using proper semantic markup in a hierarchy, list items cannot inform the listener that they are listening to a list when no parent is indicating the presence of a list and the type of list.

    Rule Description

    All list items (li) must be contained within ul or ol parent elements.

    The Algorithm (in simple terms)

    Ensures li elements are used semantically.

    Resources

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.8 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: