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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-article-for-attribute-role-on-element-section
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The W3C HTML validator enforces rules about which ARIA roles can be applied to specific HTML elements. The `<section>` element carries implicit semantics — it maps to the ARIA `region` role when it has an accessible name (e.g., via `aria-label` or `aria-labelledby`). While `article` is indeed a valid ARIA role defined in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria-1.2/#role_definitions), the HTML specification restricts which roles can override a `<section>` element's native semantics. The allowed roles for `<section>` include `alert`, `alertdialog`, `application`, `contentinfo`, `dialog`, `document`, `feed`, `log`, `main`, `marquee`, `navigation`, `none`, `note`, `presentation`, `search`, `status`, `tabpanel`, and `region` — but not `article`.

This restriction exists because HTML already provides the `<article>` element, which carries the implicit `article` ARIA role natively. Using `role="article"` on a `<section>` creates a confusing mismatch: the element's tag name suggests one semantic meaning while the role attribute declares another. This can confuse assistive technologies like screen readers, which may announce the element inconsistently depending on whether they prioritize the tag name or the explicit role.

The best fix depends on your intent:

- **If the content is self-contained and independently meaningful** (like a blog post, comment, or news story), replace the `<section>` with an `<article>` element. The `<article>` element already has the implicit `article` role, so no `role` attribute is needed.
- **If the content is a thematic grouping within a page**, keep the `<section>` element and remove the `role` attribute. Give it a heading or an `aria-label` so it functions as a meaningful landmark.
- **If you specifically need the `article` role on a non-semantic element**, use a `<div>` with `role="article"` instead, since `<div>` has no implicit role and allows any ARIA role to be applied.

## Examples

### Incorrect: `role="article"` on a `<section>`

This triggers the validation error because `article` is not a permitted role for `<section>`.

```html
<section role="article">
  <h2>Breaking news</h2>
  <p>Details about the event.</p>
</section>
```

### Correct: use `<article>` for self-contained content

The `<article>` element has the implicit `article` role, making the explicit `role` attribute unnecessary.

```html
<article>
  <h2>Breaking news</h2>
  <p>Details about the event.</p>
</article>
```

### Correct: use `<section>` without a conflicting role

If the content is a thematic grouping rather than a standalone piece, keep `<section>` and drop the `role` attribute. Adding an accessible name via `aria-labelledby` makes it a `region` landmark.

```html
<section aria-labelledby="news-heading">
  <h2 id="news-heading">Latest news</h2>
  <p>Details about the event.</p>
</section>
```

### Correct: use a `<div>` when you need an explicit `article` role

In rare cases where you cannot use the `<article>` element but need the `article` role, a `<div>` accepts any valid ARIA role.

```html
<div role="article">
  <h2>Breaking news</h2>
  <p>Details about the event.</p>
</div>
```

### Correct: nest `<article>` inside `<section>` for grouped articles

If you need both a thematic grouping and individual self-contained items, nest `<article>` elements inside a `<section>`.

```html
<section aria-labelledby="stories-heading">
  <h2 id="stories-heading">Top stories</h2>
  <article>
    <h3>First story</h3>
    <p>Story content.</p>
  </article>
  <article>
    <h3>Second story</h3>
    <p>Story content.</p>
  </article>
</section>
```

As a general rule, prefer native HTML elements over ARIA roles whenever possible. The `<article>` element communicates the `article` role more reliably than any ARIA override, and it works consistently across all browsers and assistive technologies without additional attributes.