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

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

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

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

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