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

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.

<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.

<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.

<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.

<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.

Learn more:

MDN Reference

ARIA: listitem role - Accessibility | MDN

→

MDN Reference

ARIA: article role - Accessibility | MDN

→