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

The role="button" attribute is not allowed on the article element because article already has an implicit ARIA role of article, and button 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 button role is not in that list.

The button role turns an element into an interactive control that users can activate, which clashes with article, a container for standalone content. If you need a clickable control, use a real <button> element so you get keyboard support and focus handling for free. If you need the semantics of article, keep the element and remove the role.

Example with the issue

<article role="button">
  <h2>Latest news</h2>
  <p>Content of the article.</p>
</article>

How to fix it

If you need a control the user can activate, use a <button>:

<button type="button">Read the latest news</button>

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: button role - MDN

→

MDN Reference

HTML article element - MDN

→

MDN Reference

ARIA Roles - MDN

→