# An element with “role=listitem” must be contained in, or owned by, an element with “role=list” or “role=group”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-role-listitem-must-be-contained-in-or-owned-by-an-element-with-role-list-or-role-group
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The WAI-ARIA specification defines strict ownership requirements for certain roles. The `listitem` role is one such role — it must be "owned by" an element with `role="list"` or `role="group"`. "Owned by" means the `listitem` must be either a direct DOM child of the owning element, or explicitly associated with it via the `aria-owns` attribute.

This matters because screen readers and other assistive technologies rely on the accessibility tree to convey structure to users. When a screen reader encounters a properly structured list, it announces something like "list, 3 items" and lets the user navigate between items. Without the parent `role="list"`, the individual items lose their list context — users won't know how many items exist, where the list begins and ends, or that the items are related at all.

In most cases, the simplest and most robust fix is to use native HTML list elements (`<ul>` or `<ol>` with `<li>` children) instead of ARIA roles. Native elements have built-in semantics that don't require additional attributes. Only use ARIA roles when native elements aren't feasible — for example, when building a custom component where the visual layout prevents using standard list markup.

## Examples

### Incorrect: `listitem` without a parent list

These `listitem` elements are not contained within a `role="list"` or `role="group"` parent, so the validator reports an error.

```html
<div role="listitem">Apples</div>
<div role="listitem">Bananas</div>
<div role="listitem">Cherries</div>
```

### Correct: wrapping items in `role="list"`

Adding a parent container with `role="list"` establishes the required ownership relationship.

```html
<div role="list">
  <div role="listitem">Apples</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cherries</div>
</div>
```

### Correct: using native HTML list elements

Native `<ul>` and `<li>` elements implicitly carry the `list` and `listitem` roles without any ARIA attributes. This is the preferred approach.

```html
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Correct: using `role="group"` for nested sublists

The `role="group"` container is appropriate for grouping a subset of list items within a larger list, such as a nested sublist.

```html
<div role="list">
  <div role="listitem">Fruits
    <div role="group">
      <div role="listitem">Apples</div>
      <div role="listitem">Bananas</div>
    </div>
  </div>
  <div role="listitem">Vegetables
    <div role="group">
      <div role="listitem">Carrots</div>
      <div role="listitem">Peas</div>
    </div>
  </div>
</div>
```

Note that `role="group"` should itself be nested inside a `role="list"` — it doesn't replace the top-level list container, but rather serves as an intermediate grouping mechanism within one.

### Correct: using `aria-owns` for non-descendant ownership

If the DOM structure prevents you from nesting the items directly inside the list container, you can use `aria-owns` to establish the relationship programmatically.

```html
<div role="list" aria-owns="item-1 item-2 item-3"></div>

<!-- These items live elsewhere in the DOM -->
<div role="listitem" id="item-1">Apples</div>
<div role="listitem" id="item-2">Bananas</div>
<div role="listitem" id="item-3">Cherries</div>
```

This approach should be used sparingly, as it can create confusion if the visual order doesn't match the accessibility tree order. Whenever possible, restructure your HTML so the items are actual descendants of the list container.