List items need to sit in a list

• Rule: axe/listitem
• Checks: <li> elements must be contained in a <ul> or <ol>
• WCAG: 1.3.1
• Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

• People who use a screen reader or a braille display, most of them blind.

How to fix it

The <li> elements sit in a <div> or another container

Wrap them in a <ul>, or in an <ol> when their order matters, with each <li> a direct child.

<ol>
  <li>Choose a plan</li>
  <li>Enter your details</li>
  <li>Confirm and pay</li>
</ol>

A wrapper element sits between the list and its items

Remove the wrapper, or move it inside each <li>.

The parent list has a role, such as role="navigation" or role="menu"

Remove the role. For site navigation, put a plain list inside <nav>. Keep role="menu" only for an application menu that has the full menu keyboard behavior, and give its items the matching roles.

Fixes that fail

Replacing the <li> elements with <div> elements to clear the rule

axe stops reporting them, but screen readers no longer announce a list or how many items it has.

In React

The part of the fix that differs in React, in its syntax. The rest of the guidance holds.

An item component returns an <li> but is also rendered outside a list

Let the parent list own the <li>, and have the component return only its content, so that it fits anywhere.

function Tag({ children }) {
  return <span className="tag">{children}</span>;
}

function TagList({ tags }) {
  return (
    <ul>
      {tags.map((tag) => (
        <li key={tag}>
          <Tag>{tag}</Tag>
        </li>
      ))}
    </ul>
  );
}

A wrapper component, such as a tooltip or an animation, adds an element around each <li>

Put the wrapper inside the <li>, or have it render the <li> itself if it lets you choose its element.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.