Bad value “group” for attribute “role” on element “li”.

The W3C HTML specification restricts which ARIA roles can be used on specific elements. An li element already carries the implicit role of listitem when it’s a child of a ul or ol, so adding an explicit role is often unnecessary. The group role, as defined in the WAI-ARIA specification, is meant for container elements that form a logical collection of related items — similar to how a fieldset groups form controls. Applying group to an li element contradicts the element’s purpose as an individual item within a list.

This matters for several reasons. Assistive technologies like screen readers rely on ARIA roles to communicate the structure and purpose of content to users. When an li element is marked with role="group", it overrides the native listitem semantics, potentially confusing users who depend on these tools. A screen reader might announce the element as a group container rather than a list item, breaking the expected navigation pattern of the list. Browsers and assistive technologies are optimized around correct role usage, so invalid combinations can lead to unpredictable behavior.

When you might actually need group

If your intent is to group a set of related elements together, the group role belongs on a wrapping container — not on the individual items inside it. For example, you might use role="group" on a div or a ul that contains a subset of related controls within a larger interface. If an li contains nested interactive content that needs to be grouped, wrap that content in an inner container with the group role instead.

How to fix it

1. Remove the role entirely if the li is a standard list item inside a ul or ol. The browser already provides the correct listitem semantics.
2. Move the group role to a container element if you genuinely need to create a labeled group of related items.
3. Use a different valid role if the li serves a non-standard purpose, such as menuitem, option, tab, treeitem, or presentation, depending on the widget pattern you’re building.

Examples

Incorrect: group role on li elements

<ul>
  <li role="group">Fruits</li>
  <li role="group">Vegetables</li>
  <li role="group">Grains</li>
</ul>

This triggers the validation error because group is not a permitted role for li.

Correct: no explicit role needed

<ul>
  <li>Fruits</li>
  <li>Vegetables</li>
  <li>Grains</li>
</ul>

Each li inside a ul automatically has the listitem role. No additional markup is needed.

Correct: using group on a container element

If you need to group related items with a label, apply the group role to the container:

<div role="group" aria-labelledby="food-heading">
  <h2 id="food-heading">Food Categories</h2>
  <ul>
    <li>Fruits</li>
    <li>Vegetables</li>
    <li>Grains</li>
  </ul>
</div>

Correct: nested groups within list items

If each list item contains a group of related controls, place the group role on an inner wrapper:

<ul>
  <li>
    <div role="group" aria-label="Text formatting">
      <button>Bold</button>
      <button>Italic</button>
      <button>Underline</button>
    </div>
  </li>
  <li>
    <div role="group" aria-label="Text alignment">
      <button>Left</button>
      <button>Center</button>
      <button>Right</button>
    </div>
  </li>
</ul>

This preserves the list structure while correctly applying the group role to containers of related widgets. The aria-label attribute gives each group an accessible name, which is recommended when using role="group".

Learn more:

MDN Reference

MDN: ARIA group role

→

MDN Reference

MDN - The li element

→

MDN Reference

MDN - ARIA roles

→