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

The role="img" attribute is not allowed on the article element because article already has an implicit ARIA role of article, and img is not among the roles permitted on this element.

The article element represents a self-contained composition in a document, such as a blog post, a news story, or a forum comment. Its implicit ARIA role is article. According to the ARIA in HTML specification, the article element can only use a limited set of roles: application, document, feed, main, none, presentation, or region. The img role is not in that list.

The img role marks up a collection of elements that together convey a single image, so assistive technologies announce them as one graphic with an accessible name. That meaning conflicts with article, which describes a standalone block of content. If you need img semantics, apply the role to a generic div and give it a label, or use a real <img> element. If you need the semantics of article, keep the element and remove the role.

Example with the issue

<article role="img">
  <span>★</span>
  <span>★</span>
  <span>★</span>
</article>

How to fix it

If you are presenting several elements as one image, use a div with a descriptive label:

<div role="img" aria-label="Rated 3 out of 5 stars">
  <span>★</span>
  <span>★</span>
  <span>★</span>
</div>

If you need the semantics of article, drop the conflicting role:

<article>
  <h2>Latest news</h2>
  <p>Content of the article.</p>
</article>

Learn more:

MDN Reference

ARIA: img role - MDN

→

MDN Reference

HTML article element - MDN

→

MDN Reference

ARIA Roles - MDN

→