# Bad value “listitem” for attribute “role” on element “article”.

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

The `article` element is a sectioning content element that represents a self-contained composition — a blog post, a news story, a forum entry, or similar independent content. Because it carries the implicit ARIA role of `article`, it functions as a landmark that assistive technologies recognize and expose to users for navigation. Overriding this landmark role with `listitem` creates a conflict: the element loses its `article` semantics for assistive technology users, and the `listitem` role itself becomes invalid because ARIA's role mapping rules don't permit it on `article`.

According to the ARIA in HTML specification, each HTML element has a set of allowed ARIA roles. The `article` element only permits a narrow set of roles (such as `application`, `document`, `feed`, `main`, `none`, `presentation`, and `region`). The `listitem` role is not among them. This restriction exists to prevent authors from creating confusing or contradictory semantics that would degrade the accessibility experience.

Beyond validation, this matters for real users. Screen readers rely on role information to convey structure. An `article` announced as a `listitem` is misleading — the user loses the ability to navigate by article landmarks, and the `listitem` may not function correctly without a proper parent `list` context. Browsers and assistive technologies expect `listitem` roles to appear as direct children of an element with `role="list"` (or within native `ul`/`ol` elements).

## How to fix it

The solution depends on your intent:

- **If you want a list of articles**, use native HTML list markup (`ul` or `ol` with `li`) and place each `article` inside a list item. This gives you both list semantics and article landmarks without any ARIA overrides.
- **If you can't use native list elements**, use neutral `div` elements with `role="list"` and `role="listitem"`, and nest the `article` inside each `listitem` container.
- **If the content isn't truly a list**, simply remove the `role="listitem"` attribute and let the `article` element use its native semantics.

## Examples

### Invalid: `role="listitem"` on an `article` element

This triggers the validator error because `listitem` is not an allowed role for `article`.

```html
<article role="listitem">
  <h2>News item</h2>
  <p>Details about this story.</p>
</article>
```

### Valid: native list with `article` elements inside

Using `ul` and `li` provides proper list semantics while preserving the `article` landmark role.

```html
<ul>
  <li>
    <article>
      <h2>News item</h2>
      <p>Details about this story.</p>
    </article>
  </li>
  <li>
    <article>
      <h2>Another item</h2>
      <p>More details here.</p>
    </article>
  </li>
</ul>
```

### Valid: ARIA list roles on neutral containers with nested `article` elements

When native list elements aren't suitable for your layout, use `div` elements for the list structure and nest each `article` inside.

```html
<div role="list">
  <div role="listitem">
    <article>
      <h2>News item</h2>
      <p>Details about this story.</p>
    </article>
  </div>
  <div role="listitem">
    <article>
      <h2>Another item</h2>
      <p>More details here.</p>
    </article>
  </div>
</div>
```

### Valid: standalone `article` without a list role

If the content doesn't belong in a list, simply remove the invalid role.

```html
<article>
  <h2>News item</h2>
  <p>Details about this story.</p>
</article>
```

In every case, the key principle is the same: let the `article` element keep its native semantics, and use the appropriate list structure around it rather than forcing a conflicting role onto it.