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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-button-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 `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

```html
<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>`:

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

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

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