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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-group-for-attribute-role-on-element-li
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://www.w3.org/TR/wai-aria/), 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

```html
<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

```html
<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:

```html
<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:

```html
<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"`.